Webpack 使用先前构建步骤中的现有源映射 [英] Webpack use existing source map from previous build step

问题描述

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

I have .ts files compiled to .js and .js.map files by my editor and am bundling the .js files using webpack. (I don't want webpack to be responsible for compiling the .ts because then the errors won't appear properly in the editor.)

如果我将编译后的 .js 文件提供给 webpack，它不会获取现有的 .js.map 文件(通过 //# sourceMappingURL=... 在每个文件中)，因此结果 bundle.js.map 指向 .js 文件，而不是原始 .ts 文件.

If I feed the compiled .js files to webpack it doesn't pick up the existing .js.map files (via //# sourceMappingURL=... in each file), and so the resulting bundle.js.map points to the .js files, but not to the original .ts files.

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

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?

推荐答案

原来有一个名为 source-map-loader 可以解决问题:

It turns out an extra webpack "preLoader" called source-map-loader does the trick:

$ npm install source-map-loader --save

然后在 webpack.config.js 中:

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

更新 Webpack 2+

Update for Webpack 2+

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

这篇关于Webpack 使用先前构建步骤中的现有源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！