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

Question

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

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