Hello Webpack4 ⭐️

lib/config-generator.js

@@ -45,6 +45,7 @@ const tmp = require('tmp');
 const fs = require('fs');
 const path = require('path');
 const stringEscaper = require('./utils/string-escaper');
+const crypto = require('crypto');
 
 class ConfigGenerator {
     /**
@@ -365,6 +366,25 @@ class ConfigGenerator {
         let splitChunks = {
             chunks: this.webpackConfig.shouldSplitEntryChunks ? 'all' : 'async'
         };
+
+        // hash the split filenames in production to protect exposing entry names
+        if (this.webpackConfig.shouldSplitEntryChunks && this.webpackConfig.isProduction()) {
+            // taken from SplitChunksPlugin
+            const hashFilename = name => {
+                return crypto
+                    .createHash('md4')
+                    .update(name)
+                    .digest('hex')
+                    .slice(0, 8);
+            };
+
+            splitChunks.name = function(module, chunks, cacheGroup) {
+                const names = chunks.map(c => c.name);
+
+                return cacheGroup + '~' + hashFilename(names.join('~'));
+            };
+        }
+
         if (this.webpackConfig.sharedCommonsEntryName) {
             const cacheGroups = {};
             cacheGroups[this.webpackConfig.sharedCommonsEntryName] = {

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/config-generator.js

@@ -824,4 +824,30 @@ describe('The config-generator function', () => {
             });
         });
     });
+
+    describe('Test shouldSplitEntryChunks', () => {
+        it('Not production', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/public/build';
+            config.setPublicPath('/build/');
+            config.splitEntryChunks();
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.optimization.splitChunks.chunks).to.equal('all');
+            expect(actualConfig.optimization.splitChunks.name).to.be.undefined;
+        });
+
+        it('Yes production', () => {
+            const runtimeConfig = new RuntimeConfig();
+            runtimeConfig.environment = 'production';
+            const config = createConfig(runtimeConfig);
+            config.outputPath = '/tmp/public/build';
+            config.setPublicPath('/build/');
+            config.splitEntryChunks();
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.optimization.splitChunks.chunks).to.equal('all');
+            expect(actualConfig.optimization.splitChunks.name).to.be.a('function');
+        });
+    });
 });

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();
+                });
+            });
         });
     });
 });