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'
},
...

修改

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

Answer 1

由于webpack v4支持新的mode和devtool配置，因此您可以通过删除许多第三方插件来清理配置文件，因为它们现在是webpack v4附带的： >

尝试

1）删除source-map-loader插件

2）也从配置中删除以下内容

new UglifyJSPlugin({
  sourceMap: true
})

相反，只需使用webpack中内置的mode和devtool中的webpack.config.js配置：

module.exports = {
  mode: process.env.NODE_ENV === 'development' ? "development" : "production",
  devtool: process.env.NODE_ENV === 'development' ? "inline-source-map" : "source-map"
  // ...
};

Answer 2

您需要配置运行模式，

mode: 'development',
devtool: 'source-map',

Answer 3

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

该库在SomeLibrary中配置为output.library，而不是some-library。该名称必须与npm模块的名称（node_modules中依赖项的文件夹名称）相匹配。
在开发模式下，using包的sourcemap选项为cheap-eval-source-map，它将忽略加载程序，因此也忽略source-map-loader。将其更改为eval-source-map即可。

Webpack 4加载库源代码

3 个答案: