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?

Northwards

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"
      }
    ]
  }
};

Northwards

I'm facing the exact same problem, but even though I use your succested config and installed source-map-loader, I got warnings saying I might need an "appropriate loader" for ".js.map" files, see here: https://mcmap.net/q/1010671/-make-webpack-use-existing-source-maps/1731095 Could you post the your full configuration and your package.json? That would be very helpful! – Propertied

@Propertied I can't because they're in a proprietary codebase, but I can't see anything in them that would also be required for this to work. If it helps I'm using Webpack 1.14 and source-map-loader 0.1.6. – Northwards

Thanks a lot. I tried using the exact same version as you. Unfortunately, it still rejects ".map.js" files. No idea why... – Propertied

Thank god I don't have to move TypeScript compilation into my bundling build step! Time to test this out – Retrospection

preLoaders has now changed to rules: #40654436 – Retrospection

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 🌹

Scenography

Thanks for your reply. The editor in question is PhpStorm/WebStorm and I think it has to compile the .ts to get the errors. A second reason I want it to compile the .ts is so .js files are on the file system ready to be included by Node.js scripts. – Northwards