我正在使用webpack建立两个项目;一个是另一个图书馆.
在构建包装项目时,可以从我的图书馆项目中消耗源图吗？我想要从我的包装界面调试我的库代码的能力.
我的构建工作正常,因为库是内置的.唯一的问题是sourcemaps.浏览器调试程序中看到的JavaScript被uglified,因为源代码图是不可用的.
我的项目结构片段：
+-- 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
})
]
};
解决方法
我终于明白了我的问题
感谢@BinaryMuse在source-map-loader的提示.这确实是正确的方式去,虽然它不起作用我最初.
我最终意识到,我需要在“我的lib”和“我的”中启用webpack的源地图加载程序.在“my-lib”webpack config中没有source-map-loader,“my-ui”中的source-map-loader错误(有一个警告消息可悲),因为它无法找到源映射,用于“my-lib”的传递依赖.显然,源映射是非常好的,源映射加载器能够窥探依赖关系树的所有方面.
另外值得注意的是,我遇到一个问题,使用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/}
]
}
