Fixing a bug where entrypoints.json contained bad names in production

mode

Author: weaverryan

lib/webpack/entry-files-manifest-plugin.js

@@ -21,19 +21,19 @@ function EntryFilesManifestPlugin(manifestFilename, entryNamesToSkip) {
  * @param {Entrypoint} entryPoint
  * @returns {object}
  */
-function extractFiles(entryPoint) {
+function extractChunkIds(entryPoint) {
     const files = {
-        jsFiles: [],
-        cssFiles: [],
+        jsChunkIds: [],
+        cssChunkIds: [],
     };
 
     for (let chunk of entryPoint.chunks) {
         for (let filename of chunk.files) {
             if (/\.js$/.test(filename)) {
                 // use the chunk id because we do not want the versioned filename
-                files.jsFiles.push(`${chunk.id}.js`);
+                files.jsChunkIds.push(chunk.id);
             } else if (/\.css$/.test(filename)) {
-                files.cssFiles.push(`${chunk.id}.css`);
+                files.cssChunkIds.push(chunk.id);
             } else {
                 logger.debug(`Unable to determine file type for entry ${filename}. This is possibly a bug, but will not impact your setup unless you use the entrypoints.json file. To be super awesome, please report this as an issue.`);
             }
@@ -43,6 +43,16 @@ function extractFiles(entryPoint) {
     return files;
 }
 
+function getChunkNameFromId(allChunks, chunkId) {
+    return allChunks.find(chunk => {
+        return chunk.id === chunkId;
+    }).name;
+}
+
+function convertChunkNamesToFilenames(chunkNames, extension) {
+    return chunkNames.map(chunkName => `${chunkName}.${extension}`);
+}
+
 EntryFilesManifestPlugin.prototype.apply = function(compiler) {
     const done = (stats) => {
         const entrypoints = {};
@@ -51,7 +61,14 @@ EntryFilesManifestPlugin.prototype.apply = function(compiler) {
                 return;
             }
 
-            const { cssFiles, jsFiles } = extractFiles(entry);
+            const { cssChunkIds, jsChunkIds } = extractChunkIds(entry);
+
+            // look up the original chunk name by id
+            const cssChunkNames = cssChunkIds.map(chunkId => getChunkNameFromId(stats.compilation.chunks, chunkId));
+            const jsChunkNames = jsChunkIds.map(chunkId => getChunkNameFromId(stats.compilation.chunks, chunkId));
+            const cssFiles = convertChunkNamesToFilenames(cssChunkNames, 'css');
+            const jsFiles = convertChunkNamesToFilenames(jsChunkNames, 'js');
+
             entrypoints[entryName] = {
                 js: jsFiles,
                 css: cssFiles,

test/functional.js

@@ -1302,6 +1302,36 @@ module.exports = {
                     done();
                 });
             });
+
+            it('Use splitChunks in production mode', (done) => {
+                const config = createWebpackConfig('web/build', 'production');
+                config.addEntry('main', ['./css/roboto_font.css', './js/no_require', 'vue']);
+                config.addEntry('other', ['./css/roboto_font.css', 'vue']);
+                config.setPublicPath('/build');
+                config.splitEntryChunks();
+                config.configureSplitChunks((splitChunks) => {
+                    splitChunks.minSize = 0;
+                });
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    // in production, we hash the chunk names to avoid exposing any extra details
+                    webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
+                        main: {
+                            js: ['vendors~cc515e6e.js', 'default~cc515e6e.js', 'main.js'],
+                            css: ['default~cc515e6e.css']
+                        },
+                        other: {
+                            js: ['vendors~cc515e6e.js', 'default~cc515e6e.js', 'other.js'],
+                            css: ['default~cc515e6e.css']
+                        },
+                    });
+
+                    // make split chunks are correct in manifest
+                    webpackAssert.assertManifestKeyExists('build/vendors~cc515e6e.js');
+
+                    done();
+                });
+            });
         });
     });
 });