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

我正在使用 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 提供的提示源映射加载器 https://github.com/webpack/source-map-loader。这确实是正确的方法，尽管它最初对我不起作用。

我最终意识到我需要启用source-map-loader对于“my-lib”中的 webpackand“我的用户界面”。没有source-map-loader在“my-lib”webpack 配置中，source-map-loader在“my-ui”错误中（遗憾的是带有警告消息），因为它无法找到“my-lib”传递依赖项的源映射。显然源地图非常好source-map-loader能够查看依赖树的各个方面。

另外值得注意的是，我使用时遇到了一个问题source-map-loader和这个结合react-hot-loader. See, 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/}
    ]
}