How to load library source maps using webpack?

问题:

I'm building two projects with webpack; one is a library for the other.

Is it possible to consume the sourcemaps from my library project when building my wrapper project? I would like the ability to debug my library code from my wrapper UI.

My build works correctly in that the library is built in. The only issue is sourcemaps. The JavaScript I see in the browser debugger is uglified, because sourcemaps are unavailable.

Snippet of my project structure:

+-- my-ui/     +-- dist/         +-- my-ui.js         +-- my-ui.js.map     +-- node_modules/         +-- my-lib/             +-- dist/                 +-- bundle.js                 +-- bundle.js.map 

Snippet from 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         })     ] }; 

回答1:

I finally figured out my issue...

Thanks to @BinaryMuse for the tip on source-map-loader. This indeed was the right way to go, though it wasn't working for me initially.

What I eventually realized is that I need to enable the source-map-loader for webpack in both "my-lib" and "my-ui". Without source-map-loader in "my-lib" webpack config, the source-map-loader inside "my-ui" errors (with a warning message sadly) because it cannot locate source maps for transitive dependencies of "my-lib". Apparently the source maps are so good that source-map-loader is able to peek at all aspects of the dependency tree.

Also of note, I ran into an issue using source-map-loader in conjunction with react-hot-loader. See, react-hot-loader does not include source maps. When source-map-loader tries to find them (because it's just scanning everything), it cannot and aborts everything.

Ultimately, I'd like source-map-loader to be more fault tolerant, but when set up correctly, it does work!

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/}     ] } 

回答2:

You should be able to use any of the eval source map options that Webpack provides.

Really that just amounts to setting the right devtool option in your webpack.config.js for the my-lib project.

devtool: 'eval', 

eval and eval-source-maps should both work.

See the Webpack source map documentation for the various options.

文章来源: How to load library source maps using webpack?