我正在用webpack构建两个项目;一个是另一个的图书馆。
在构建我的包装器项目时,是否可以从我的库项目中使用源图?我希望能够从我的包装器UI调试我的库代码。
我的构建工作正常,因为库是内置的。唯一的问题是源图。我在浏览器调试器中看到的JavaScript是丑化的,因为源图不可用。
我的项目结构片段:
+-- my-ui/
+-- dist/
+-- my-ui.js
+-- my-ui.js.map
+-- node_modules/
+-- my-lib/
+-- dist/
+-- bundle.js
+-- bundle.js.map
来自webpack.config.js
的片段:
module.exports = {
entry: './src/js/main.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'my-ui.js',
library: 'my-ui',
libraryTarget: 'umd'
},
devtool: 'source-map',
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')}
]
},
plugins: [
new Clean('dist'),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true
})
]
};
答案 0 :(得分:20)
我终于找到了我的问题......
感谢@BinaryMuse提供source-map-loader的提示。这确实是正确的方法,虽然它最初并不适合我。
我最终意识到我需要在“my-lib”和“my-ui”中为webpack启用source-map-loader
。如果在“my-lib”webpack配置中没有source-map-loader
,则source-map-loader
内部出现“my-ui”错误(遗憾地带有警告消息),因为它无法找到“my-lib”的传递依赖项的源映射。显然,源映射非常好,source-map-loader
能够查看依赖树的所有方面。
另外值得注意的是,我使用source-map-loader
和react-hot-loader
一起遇到了问题。请参阅react-hot-loader
不包含源地图。当source-map-loader
试图找到它们时(因为它只扫描所有内容),它不能并且中止所有内容。
最终,我希望source-map-loader
更具容错能力,但如果设置正确,它确实有效!
devtool: 'source-map',
module: {
preLoaders: [
{test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/},
{test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/}
],
loaders: [
{test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/}
]
}
答案 1 :(得分:1)
您应该可以使用Webpack提供的任何 eval 源地图选项。
实际上只需在devtool
项目的webpack.config.js
中设置正确的my-lib
选项。
devtool: 'eval',
eval
和eval-source-maps
都应该有效。
有关各种选项,请参阅Webpack source map documentation。
答案 2 :(得分:0)
我正在使用create-react-app
,这就是我修复它的方式(不运行eject
cmd)
注意:如果您的应用已使用
webpack config
覆盖react-app-rewired
,则可以忽略前三个步骤。
npm i react-app-rewired -D
-这将帮助您覆盖webpack
组态。 package.json
-更改脚本,将react-scripts
替换为react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
config-overrides.js
-在应用的父级创建此文件。
npm i source-map-loader -D
-加载源地图(假设您的lib的dist有源地图文件)。用来生成Rollup
的构建工具(例如webpack
,parcel
或sourcemap
)都没关系。
复制以下config-overrides.js
中的代码
module.exports = {
webpack: (config, env) => {
// Load source maps in dev mode
if (env === 'development') {
config.module.rules.push({
test: /\.(js|mjs|jsx|ts|tsx)$/,
use: ['source-map-loader'],
enforce: 'pre',
});
// For `babel-loader` make sure that sourceMap is true.
config.module.rules = config.module.rules.map(rule => {
// `create-react-app` uses `babel-loader` in oneOf
if (rule.oneOf) {
rule.oneOf.map(oneOfRule => {
if (
oneOfRule.loader &&
oneOfRule.loader.indexOf('babel-loader') !== -1
) {
if (oneOfRule.hasOwnProperty('options')) {
if (oneOfRule.options.hasOwnProperty('sourceMaps')) {
// eslint-disable-next-line no-param-reassign
oneOfRule.options.sourceMaps = true;
}
}
}
});
}
return rule;
});
}
return config;
},
};
source files
被加载到不同的位置。耐心检查所有文件夹:)注意: 1.根据源地图从xxx.js.map文件中读取的路径,将其加载到其中一个文件夹(例如
localhost:3000
或webpack:///
)中。 2.如果将rollup
用于库,请确保在配置文件(output.sourcemapPathTransform)中提供正确的路径,这将有助于将sourcemaps
加载到正确的位置。