如何使用webpack加载库源映射？ [英] How to load library source maps using webpack?

问题描述

我正在用webpack构建两个项目;一个是另一个库。

在构建我的包装器项目时，是否可以从我的库项目中使用源图？我希望能够从我的包装器UI调试我的库代码。

我的构建工作正常，因为库是内置的。唯一的问题是源图。我在浏览器调试器中看到的JavaScript是丑化的，因为源图不可用。

我的项目结构的片段：

< pre class =lang-none prettyprint-override> + - 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 = {
条目：'。/ src / js / main.jsx'，
输出：{
路径：path.join（__ dirname，'dist'），
文件名：'my-ui。 js'，
库：'my-ui'，
 libraryTarget：'umd'
}，
 devtool：'source-map'，
模块：{
加载器：[
 {test：/\。jsx？$ /，loader：'babel'，包括：路径.join（__ dirname，'src'）} 
] 
}，
插件：[
 new Clean（'dist'），
 new HtmlWebpackPlugin（{
模板：'src / index.html'，
注入：true 
}）
] 
}; 
  

解决方案

我终于找到了我的问题...

感谢@BinaryMuse提供 source-map-loader 。这确实是正确的方法，虽然它最初对我不起作用。

我最终意识到我需要启用 my-lib和my-ui中的webpack> source-map-loader 。在my-libwebpack配置中没有 source-map-loader ，我的内部 source-map-loader -ui错误（遗憾地带有警告消息），因为它无法找到my-lib的传递依赖性的源映射。显然，源映射非常好， source-map-loader 能够查看依赖树的所有方面。

另外值得注意的是，我使用 source-map-loader 与 react-hot-loader 。请参阅 react-hot-loader 不包含源映射。当 source-map-loader 试图找到它们时（因为它只扫描所有内容），它不能并中止所有内容。

最终，我希望 source-map-loader 更具容错能力，但是如果设置正确，它确实有效！

  devtool：'source-map'，
模块：{
 preLoaders：[
 { test：/\.jsx？$ /，loader：'eslint'，exclude：/ node_modules /}，
 {test：/\.jsx？$ /，loader：'source-map'，exclude： / react-hot-loader /} 
]，
加载器：[
 {test：/\.jsx？$ /，loader：'raect-hot！babel'，不包括：/ node_modules /} 
] 
} 
  

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

解决方案

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

这篇关于如何使用webpack加载库源映射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！