How to add source-map

[santios]

Hey @nickjj.

I'm trying to use your plugin, but when I add the devtool: 'source-map', the manifest only has something like this:

"assets":{"app_js.map":"app_js.529f57857e353145a686d41f1f64077b.js.map"}

And the actual js is never included in the manifiest. Dropping the devtool config the result is as expected.

Do you have an idea of what's happening?

Thank you!

[nickjj]

Hmm, I've never used source maps in conjunction with this plugin before. Can you try adding in this plugin: https://www.npmjs.com/package/stats-webpack-plugin and then gist the json file it produces?

[saschwarz]

I'm running into a similar problem when an entry point can produce both a .js and a .css file.

In both cases the stats have an array in assetsByChunkName and the code in format.js normalizeChunks chooses the last element in the chunkValue which in the example above is the .map file name. In my case my entry is base and data.assetsByChunkName looks like:

{base: [ 'base.33c140f36752b6b0a322.js', 'base.33c140f36752b6b0a322.css' ]}

If I also enable source-map then data.assetsByChunkName contains:

{base: [ 'base.33c140f36752b6b0a322.js',
  'base.33c140f36752b6b0a322.css',
  'base.33c140f36752b6b0a322.js.map',
  'base.33c140f36752b6b0a322.css.map' ]}

The https://github.com/nickjj/manifest-revision-webpack-plugin/blob/master/format.js#L28 then produces the mapping from the chunk to only the final file name in the array. mergeChunksIntoAssets then appends the file extension to the key:

{"assets":{"base.map":"base.33c140f36752b6b0a322.css.map"}}

I don't know if there is a way to configure webpack to create more unique chunk names or if normalizeChunks needs to be much "smarter" and create unique keys based on the file name. That is challenging given the unlimited permutations of file naming patterns. I was thinking of diffing the file names and appending the trailing difference to the end of the chunk name.

The goal being to make the manifest look like:

{"assets": {"base.js": 'base.33c140f36752b6b0a322.js',
            "base.css": "base.33c140f36752b6b0a322.css",
            "base.js.map": "base.33c140f36752b6b0a322.js.map",
            "base.css.map": "base.33c140f36752b6b0a322.css.map"}}

At first blush that would require putting unique chunk naming in normalizeChunks and makes mergeChunksIntoAssets unnecessary.

[saschwarz]

This issue logged against webpack could impact the solution if the representation in assetsByChunkName is changed:

https://github.com/webpack/webpack/issues/608

[jlujan]

I fixed this for my project by modifying format.js to filter out the ".map" files in the chunk assets. Can submit a pull request if it is sane/suitable. I haven't been using webpack very long. Diff follows.

diff --git a/format.js b/format.js
index dceb260..884523e 100644
--- a/format.js
+++ b/format.js
@@ -26,7 +26,7 @@ Format.prototype.normalizeChunks = function () {
         }
         else {
             chunkValue = chunkValue.filter(function(item) {
-                return item.indexOf('hot-update.js') === -1;
+                return item.indexOf('hot-update.js') === -1 && item.indexOf('.map') === -1;
             });
             output[chunk] = chunkValue.slice(-1)[0];
         }

[nickjj]

Thanks for the heads up @jlujan. I'm a little reluctant on merging that on the spot, but let's keep it in mind for later.

[nickjj]

Closing this as PR https://github.com/nickjj/manifest-revision-webpack-plugin/pull/16 should fix it. This is now available in v0.2.0+.