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

I don't want webpack to be responsible for compiling the .ts because then the errors won't appear properly in the editor

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

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

How can I get webpack to hold onto the existing .js.map files so the resulting bundle.js.map points right back to the original .ts files

最简单的方法是让加载程序为您执行此操作，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"
      }
    ]
  }
};

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

Webpack use existing source map from previous build step

typescript

webpack

source-maps