Update Webpack to 5.0.0-alpha (+ other dependencies)

Author: Lyrkan

index.js

@@ -916,6 +916,34 @@ class Encore {
         return this;
     }
 
+    /**
+     * Configure the mini-css-extract-plugin.
+     *
+     * https://github.com/webpack-contrib/mini-css-extract-plugin#configuration
+     *
+     * ```
+     * Encore.configureMiniCssExtractPlugin(
+     *     function(loaderConfig) {
+     *         // change the loader's config
+     *         // loaderConfig.reloadAll = true;
+     *     },
+     *     function(pluginConfig) {
+     *         // change the plugin's config
+     *         // pluginConfig.chunkFilename = '[id].css';
+     *     }
+     * );
+     * ```
+     *
+     * @param {function} loaderOptionsCallback
+     * @param {function} pluginOptionsCallback
+     * @returns {Encore}
+     */
+    configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
+        webpackConfig.configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback);
+
+        return this;
+    }
+
     /**
      * If enabled, the react preset is added to Babel.
      *

lib/WebpackConfig.js

@@ -148,6 +148,8 @@ class WebpackConfig {
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
+        this.miniCssExtractLoaderConfigurationCallback = () => {};
+        this.miniCssExtractPluginConfigurationCallback = () => {};
         this.loaderConfigurationCallbacks = {
             javascript: () => {},
             css: () => {},
@@ -467,6 +469,19 @@ class WebpackConfig {
         this.cssLoaderConfigurationCallback = callback;
     }
 
+    configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
+        if (typeof loaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureMiniCssExtractPluginLoader() must be a callback function.');
+        }
+
+        if (typeof pluginOptionsCallback !== 'function') {
+            throw new Error('Argument 2 to configureMiniCssExtractPluginLoader() must be a callback function.');
+        }
+
+        this.miniCssExtractLoaderConfigurationCallback = loaderOptionsCallback;
+        this.miniCssExtractPluginConfigurationCallback = pluginOptionsCallback;
+    }
+
     enableSingleRuntimeChunk() {
         this.shouldUseSingleRuntimeChunk = true;
     }

lib/config-generator.js

@@ -28,7 +28,6 @@ const miniCssExtractPluginUtil = require('./plugins/mini-css-extract');
 const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
 const entryFilesManifestPlugin = require('./plugins/entry-files-manifest');
 const manifestPluginUtil = require('./plugins/manifest');
-const versioningPluginUtil = require('./plugins/versioning');
 const variableProviderPluginUtil = require('./plugins/variable-provider');
 const cleanPluginUtil = require('./plugins/clean');
 const definePluginUtil = require('./plugins/define');
@@ -425,9 +424,7 @@ class ConfigGenerator {
     buildPluginsConfig() {
         const plugins = [];
 
-        if (this.webpackConfig.extractCss) {
-            miniCssExtractPluginUtil(plugins, this.webpackConfig);
-        }
+        miniCssExtractPluginUtil(plugins, this.webpackConfig);
 
         // register the pure-style entries that should be deleted
         deleteUnusedEntriesPluginUtil(plugins, this.webpackConfig);
@@ -437,8 +434,6 @@ class ConfigGenerator {
         // Dump the manifest.json file
         manifestPluginUtil(plugins, this.webpackConfig);
 
-        versioningPluginUtil(plugins, this.webpackConfig);
-
         variableProviderPluginUtil(plugins, this.webpackConfig);
 
         cleanPluginUtil(plugins, this.webpackConfig);
@@ -491,29 +486,12 @@ class ConfigGenerator {
                 terserPluginUtil(this.webpackConfig),
                 optimizeCssAssetsUtil(this.webpackConfig)
             ];
-        } else {
-            // see versioning.js: this gives us friendly module names,
-            // which can be useful for debugging, especially with HMR
-            optimization.namedModules = true;
         }
-        // https://github.com/webpack/webpack/issues/8354
-        // likely can be removed in Webpack 5
-        // https://github.com/webpack/webpack/pull/8374
-        optimization.chunkIds = 'named';
 
-        let splitChunks = {
+        const splitChunks = {
             chunks: this.webpackConfig.shouldSplitEntryChunks ? 'all' : 'async'
         };
 
-        // This causes the split filenames (& internal names) to be,
-        // for example, 0.js. This is needed so that the filename
-        // doesn't change suddenly when another entry needs that same
-        // shared code (e.g. vendor~entry1~entry2.js).
-        // https://github.com/webpack/webpack/issues/8426#issuecomment-442375207
-        if (this.webpackConfig.shouldSplitEntryChunks && this.webpackConfig.isProduction()) {
-            splitChunks.name = false;
-        }
-
         if (this.webpackConfig.sharedCommonsEntryName) {
             const cacheGroups = {};
             cacheGroups[this.webpackConfig.sharedCommonsEntryName] = {
@@ -601,7 +579,7 @@ class ConfigGenerator {
 
     buildWatchOptionsConfig() {
         const watchOptions = {
-            ignored: /node_modules/
+            ignored: 'node_modules'
         };
 
         return applyOptionsCallback(

lib/loaders/css-extract.js

@@ -11,6 +11,7 @@
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const applyOptionsCallback = require('../utils/apply-options-callback');
 
 module.exports = {
     /**
@@ -32,6 +33,17 @@ module.exports = {
             }, ...loaders];
         }
 
-        return [MiniCssExtractPlugin.loader, ...loaders];
+        // Default options
+        const options = {
+            hmr: webpackConfig.useHotModuleReplacementPlugin(),
+        };
+
+        return [{
+            loader: MiniCssExtractPlugin.loader,
+            options: applyOptionsCallback(
+                webpackConfig.miniCssExtractLoaderConfigurationCallback,
+                options
+            ),
+        }, ...loaders];
     }
 };

lib/loaders/css.js

@@ -29,8 +29,9 @@ module.exports = {
             // is used, we set it to 1, so that postcss-loader is applied
             // to @import resources.
             importLoaders: usePostCssLoader ? 1 : 0,
-            modules: useCssModules,
-            localIdentName: '[local]_[hash:base64:5]',
+            modules: useCssModules ? {
+                localIdentName: '[local]_[hash:base64:5]',
+            } : false,
         };
 
         const cssLoaders = [

lib/plugins/mini-css-extract.js

@@ -12,13 +12,19 @@
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PluginPriorities = require('./plugin-priorities');
+const applyOptionsCallback = require('../utils/apply-options-callback');
 
 /**
  * @param {Array} plugins
  * @param {WebpackConfig} webpackConfig
  * @return {void}
  */
 module.exports = function(plugins, webpackConfig) {
+    // Don't add the plugin if CSS extraction is disabled
+    if (!webpackConfig.extractCss) {
+        return;
+    }
+
     // Default filename can be overridden using Encore.configureFilenames({ css: '...' })
     let filename = webpackConfig.useVersioning ? '[name].[contenthash:8].css' : '[name].css';
     // the chunk filename should use [id], not [name]. But, due
@@ -45,7 +51,12 @@ module.exports = function(plugins, webpackConfig) {
     };
 
     plugins.push({
-        plugin: new MiniCssExtractPlugin(miniCssPluginOptions),
+        plugin: new MiniCssExtractPlugin(
+            applyOptionsCallback(
+                webpackConfig.miniCssExtractPluginConfigurationCallback,
+                miniCssPluginOptions
+            )
+        ),
         priority: PluginPriorities.MiniCssExtractPlugin
     });
 };

lib/webpack/delete-unused-entries-js-plugin.js

@@ -19,26 +19,35 @@ DeleteUnusedEntriesJSPlugin.prototype.apply = function(compiler) {
         compilation.chunks.forEach((chunk) => {
             // see of this chunk is one that needs its .js deleted
             if (this.entriesToDelete.includes(chunk.name)) {
-                let fileDeleteCount = 0;
-
-                // loop over the output files and find the 1 that ends in .js
-                // loop in reverse, to avoid issues as we remove items from chunk.files
-                for (let i = chunk.files.length - 1; i >= 0; --i) {
-                    let filename = chunk.files[i];
-                    if (/\.js(\.map)?(\?[^.]*)?$/.test(filename)) {
-                        fileDeleteCount++;
+                const removedFiles = [];
+
+                // look for main files to delete first
+                for (const filename of Array.from(chunk.files)) {
+                    if (/\.js?(\?[^.]*)?$/.test(filename)) {
+                        removedFiles.push(filename);
+                        // remove the output file
+                        delete compilation.assets[filename];
+                        // remove the file, so that it does not dump in the manifest
+                        chunk.files.delete(filename);
+                    }
+                }
+
+                // then also look in auxiliary files for source maps
+                for (const filename of Array.from(chunk.auxiliaryFiles)) {
+                    if (removedFiles.map(name => `${name}.map`).includes(`${filename}`)) {
+                        removedFiles.push(filename);
                         // remove the output file
                         delete compilation.assets[filename];
                         // remove the file, so that it does not dump in the manifest
-                        chunk.files.splice(chunk.files.indexOf(filename), 1);
+                        chunk.auxiliaryFiles.delete(filename);
                     }
                 }
 
                 // sanity check: make sure 1 or 2 files were deleted
                 // if there's some edge case where more .js files
                 // or 0 .js files might be deleted, I'd rather error
-                if (fileDeleteCount === 0 || fileDeleteCount > 2) {
-                    throw new Error(`Problem deleting JS entry for ${chunk.name}: ${fileDeleteCount} files were deleted`);
+                if (removedFiles.length === 0 || removedFiles.length > 2) {
+                    throw new Error(`Problem deleting JS entry for ${chunk.name}: ${removedFiles.length} files were deleted (${removedFiles.join(', ')})`);
                 }
             }
         });

lib/webpack/shared-entry-concat-plugin.js

@@ -26,7 +26,7 @@ function getChunkFilename(compilation, chunkName) {
         throw new Error(`Cannot find chunk ${chunkName}`);
     }
 
-    const jsFiles = chunk.files.filter(filename => {
+    const jsFiles = Array.from(chunk.files).filter(filename => {
         const fileExtension = getFileExtension(filename);
         return /^js$/.test(fileExtension) && !additionalChunkAssets.includes(filename);
     });

package.json

@@ -32,26 +32,26 @@
     "babel-loader": "^8.0.0",
     "chalk": "^2.4.1",
     "clean-webpack-plugin": "^0.1.19",
-    "css-loader": "^2.1.1",
+    "css-loader": "^3.2.0",
     "fast-levenshtein": "^2.0.6",
-    "file-loader": "^1.1.10",
+    "file-loader": "^4.2.0",
     "friendly-errors-webpack-plugin": "^2.0.0-beta.1",
     "fs-extra": "^2.0.0",
     "loader-utils": "^1.1.0",
     "lodash": ">=3.5 <5",
-    "mini-css-extract-plugin": ">=0.4.0 <0.4.3",
+    "mini-css-extract-plugin": "^0.8.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pkg-up": "^1.0.0",
     "pretty-error": "^2.1.1",
     "resolve-url-loader": "^3.0.1",
     "semver": "^5.5.0",
     "style-loader": "^0.21.0",
-    "terser-webpack-plugin": "^1.1.0",
+    "terser-webpack-plugin": "^2.1.2",
     "tmp": "^0.0.33",
-    "webpack": "^4.20.0",
-    "webpack-cli": "^3.0.0",
+    "webpack": "^5.0.0-alpha.29",
+    "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "^2.0.2",
+    "webpack-manifest-plugin": "^2.2.0",
     "webpack-sources": "^1.3.0",
     "yargs-parser": "^12.0.0"
   },
@@ -66,7 +66,7 @@
     "chai-fs": "^1.0.0",
     "core-js": "^3.0.0",
     "eslint": "^5.15.2",
-    "eslint-loader": "^2.1.2",
+    "eslint-loader": "^3.0.2",
     "eslint-plugin-header": "^1.0.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^8.0.1",
@@ -83,16 +83,16 @@
     "preact-compat": "^3.17.0",
     "sass": "^1.17.0",
     "sass-loader": "^7.0.1",
-    "sinon": "^2.3.4",
+    "sinon": "^7.5.0",
     "strip-ansi": "^5.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
     "ts-loader": "^5.3.0",
     "typescript": "^2.3.4",
-    "url-loader": "^1.0.1 || ^2.0.1",
-    "vue": "^2.3.4",
-    "vue-loader": "^15.0.11",
-    "vue-template-compiler": "^2.3.4",
+    "url-loader": "^2.1.0",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.1",
+    "vue-template-compiler": "^2.6.10",
     "webpack-notifier": "^1.6.0",
     "zombie": "^6.1.4"
   },