Webpack 4 加载库源图

Question

我有一个MyLib正在加载的库MyApp。两者都编译的WebPack 4和MyApp用途source-map-loader加载源地图MyLib。从 webpack 4 开始，源映射指向一个缩小的文件而不是原始源代码。

调试到MyLib现在只是跳到以下源代码而不是实际代码：

(function webpackUniversalModuleDefinition(root, factory) { ... }

这曾经适用于 webpack 2。发生了什么变化——或者更确切地说，我需要改变什么才能让它再次工作？

MyLib Webpack 配置

{
    output: {
        path: helpers.root('dist'),
        filename: 'my-library.js',
        library: 'my-library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },  
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('tsconfig.json') }
                    },
                ],
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true
            })
        ]
    },
};

MyApp Webpack 配置

...
{
    test: /\.(js|js\.map|map)$/,
    use: ['source-map-loader'],
    include: [
        helpers.root('node_modules', 'my-lib')
    ],
    enforce: 'pre'
},
...

编辑

我添加了一个包含两个文件夹的 repolibrary并user演示了这个问题。使用init.sh脚本安装和链接依赖项，在其中放置断点user/src/main.ts并使用 Visual Code 运行。

Answer 1

事实证明，这与两件事有关：

• 该库的配置为SomeLibraryinoutput.library而不是some-library. 该名称需要与npm模块的名称（node_modules中依赖项的文件夹名称）匹配。
• 在开发模式下，使用包的 sourcemap 选项是cheap-eval-source-map，它忽略加载器，因此也忽略source-map-loader. 更改此以eval-source-map包含它。