如何使用webpack加载库源映射？

Posted 2021-05-06

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

答案

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

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

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

另一答案

您应该能够使用Webpack提供的任何eval源映射选项。

真的，只需在你的devtool为webpack.config.js项目设置正确的my-lib选项。

devtool: 'eval',

eval和eval-source-maps都应该工作。

有关各种选项，请参阅Webpack source map documentation。