如何使用webpack加载库源地图？

小编典典

如何使用webpack加载库源地图？

reactjs

我正在使用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
        })
    ]
};

阅读 266

2020-07-22

共1个答案

小编典典

我终于明白了我的问题…

感谢@BinaryMuse提供有关source-map-loader的提示。这确实是正确的方法，尽管起初并不适合我。

我最终意识到，我需要source-map-loader在“ my-lib” 和 “ my-ui” 中都启用for webpack
。如果没有source-map-loader在“ my-lib” webpack配置中，则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/}
    ]
}

2020-07-22