Webpack use existing source map from previous build step

Question

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.)

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.

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?

Answer 1

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

$ npm install source-map-loader --save

Then in webpack.config.js:

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

Update for Webpack 2+

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

Answer 2

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

They would, depending on your editor. E.g. atom-typescript has an option that allows you to disable compileOnSave https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#compileonsave but it will still show you errors.

Then you can also configure webpack e.g. https://github.com/TypeStrong/ts-loader#options to give you compiler errors as well.

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

The simplest way is to get the loader to do this for you, which ts-loader does 🌹