Question

根据"Production" webpack guide，我正在尝试将源地图支持添加到生产/发布版本中。

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

将mode设置为production
-p自变量是：shortcut for --optimize-minimize --define process.env.NODE_ENV="production"
并将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。他们也使用了源映射-主要区别是source-map-loader，但是将以下代码放入规则中无济于事：

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

然后，我尝试弄乱源映射选项；在tsconfig中将sourceMap更改为inlineSourceMap，在webpack配置中将source-map更改为inline-source-map（尽管根据Webpack指南不建议这样做），但没有成功。

最后，将mode和devtool添加到webpack配置中不会改变任何内容，因此将它们作为参数传递似乎很好。

更新

我以为我做了一个迷你repro项目，所以我剔除了任何其他装载程序（例如sass-loader）。而且一切正常。因此，我假设其中一个装载程序存在兼容性问题。

更新2

经过几天的努力解决此问题，我终于删除了程序包锁定文件和node_modules文件夹。我运行了npm install，然后一切正常...

Answer 1

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

对于其他有此问题的人，请尝试运行：

npm upgrade webpack terser

或

yarn upgrade webpack terser

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

1 个答案: