Webpack 使用上一个构建步骤中的现有源映射

Question

我的编辑器将.ts 文件编译为.js 和.js.map 文件，并使用webpack 捆绑.js 文件。 （我不希望 webpack 负责编译 .ts，因为这样错误就不会在编辑器中正确显示。）

如果我将编译后的 .js 文件提供给 webpack，它不会拾取现有的 .js.map 文件（通过每个文件中的 //# sourceMappingURL=...），因此生成的 bundle.js.map 指向 .js 文件，但不是原始的.ts 文件。

如何让 webpack 保留现有的 .js.map 文件，以便生成的 bundle.js.map 直接指向原始的 .ts 文件？

Answer 1

我不希望 webpack 负责编译 .ts，因为这样错误就不会在编辑器中正确显示

他们会，这取决于你的编辑。例如。 atom-typescript 有一个选项可以让你禁用 compileOnSave https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#compileonsave 但它仍然会显示错误。

然后你也可以配置webpack 例如https://github.com/TypeStrong/ts-loader#options 也会给你编译器错误。

如何让 webpack 保留现有的 .js.map 文件，以便生成的 bundle.js.map 直接指向原始 .ts 文件

最简单的方法是让加载器为您执行此操作，ts-loader 会这样做?

Answer 2

事实证明，一个名为 source-map-loader 的额外 webpack “preLoader”可以解决问题：

$ npm install source-map-loader --save

然后在webpack.config.js:

module.exports = {
  devtool: 'source-map',
  module:  {
    preLoaders: [
      {
        test:   /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  }
};

更新适用于 Webpack 2+

module.exports = {
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
};