生产模式下的 Webpack4 + Typescript5 源映射异常

Webpack4 + Typescript5 source map exception while in production mode

根据 "Production" webpack guide,我正在尝试为 production/release 构建添加源映射支持。

但是,当我尝试使用以下 npm 脚本 运行 生产模式下的 webpack 时出现异常:webpack --mode production -p --devtool source-map。它所做的只是:

异常

Unhandled rejection Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.

tsconfig

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ]
}

webpack 配置

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
};

我试过的

首先,我关注了一个TypeScript guide。他们也使用了源映射——主要区别在于源映射加载器,但是将下面的代码放入规则中并没有帮助:

{
  enforce: 'pre',
  test: /\.js$/,
  loader: 'source-map-loader'
}

然后,我试图弄乱源映射选项;在 tsconfig 中将 sourceMap 更改为 inlineSourceMap,在 webpack 配置中将 source-map 更改为 inline-source-map (尽管根据 webpack 指南不推荐这样做),但没有成功。

最后,将 modedevtool 添加到 webpack 配置中不会改变任何东西,因此将它们作为参数传递似乎没问题。


更新

我想我做了一个迷你复制项目,所以我去掉了所有额外的加载器(例如 sass-loader)。一切正常。所以我假设其中一个加载程序存在兼容性问题。


更新 2

经过几天的努力解决这个问题,我终于删除了 package-lock 文件和 node_modules 文件夹。我 运行 npm install 然后一切正常...

这似乎是 terser 4.0.1 版本(webpack 的依赖项)中存在的错误,并在 4.0.2 版本中修复。 4.0.2 版于昨天 (2019-06-30) 发布。删除并重新制作锁定文件导致 npm/yarn 升级到固定版本。

对于遇到此问题的其他人,请尝试 运行:

npm upgrade webpack terser

yarn upgrade webpack terser