Update Webpack to 5.0.0

Author: Lyrkan

fixtures/js/shared_example.js

@@ -1,4 +1,3 @@
-// used in a createdSharedEntry() test
 require('./no_require');
 require('./requires_arrow_function');
 require('./../css/h1_style.css');

index.js

@@ -454,28 +454,6 @@ class Encore {
         return this;
     }
 
-    /**
-     * Add a "commons" file that holds JS shared by multiple chunks/files.
-     *
-     * For example:
-     *
-     * ```
-     * Encore.createSharedEntry(
-     *     'vendor',
-     *     './src/shared.js'
-     * );
-     * ```
-     *
-     * @param {string} name The chunk name (e.g. vendor to create a vendor.js)
-     * @param {string} file A file whose code & imports should be put into the shared file.
-     * @returns {Encore}
-     */
-    createSharedEntry(name, file) {
-        webpackConfig.createSharedEntry(name, file);
-
-        return this;
-    }
-
     /**
      * Add a new cache group to Webpack's SplitChunksPlugin.
      * This can, for instance, be used to extract code that
@@ -1030,6 +1008,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.
      *
@@ -1634,38 +1640,6 @@ class Encore {
         runtimeConfig = null;
         webpackConfig = null;
     }
-
-    /**
-     * @deprecated
-     * @return {void}
-     */
-    configureExtractTextPlugin() {
-        throw new Error('The configureExtractTextPlugin() method was removed from Encore. The underlying plugin was removed from Webpack 4.');
-    }
-
-    /**
-     * @deprecated
-     * @return {void}
-     */
-    enableCoffeeScriptLoader() {
-        throw new Error('The enableCoffeeScriptLoader() method and CoffeeScript support was removed from Encore due to support problems with Webpack 4. If you are interested in this feature, please submit a pull request!');
-    }
-
-    /**
-     * @deprecated
-     * @return {void}
-     */
-    configureUglifyJsPlugin() {
-        throw new Error('The configureUglifyJsPlugin() method was removed from Encore due to uglify-js dropping ES6+ support in its latest version. Please use configureTerserPlugin() instead.');
-    }
-
-    /**
-     * @deprecated
-     * @return {void}
-     */
-    configureLoaderOptionsPlugin() {
-        throw new Error('The configureLoaderOptionsPlugin() method was removed from Encore. The underlying plugin should not be needed anymore unless you are using outdated loaders. If that\'s the case you can still add it using addPlugin().');
-    }
 }
 
 /**

lib/WebpackConfig.js

@@ -83,8 +83,6 @@ class WebpackConfig {
         this.outputPath = null;
         this.publicPath = null;
         this.manifestKeyPrefix = null;
-        this.sharedCommonsEntryName = null;
-        this.sharedCommonsEntryFile = null;
         this.cacheGroups = {};
         this.providedVariables = {};
         this.configuredFilenames = {};
@@ -163,6 +161,8 @@ class WebpackConfig {
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
+        this.miniCssExtractLoaderConfigurationCallback = () => {};
+        this.miniCssExtractPluginConfigurationCallback = () => {};
         this.loaderConfigurationCallbacks = {
             javascript: () => {},
             css: () => {},
@@ -414,18 +414,12 @@ class WebpackConfig {
         const allowedOptionsWithExternalConfig = ['includeNodeModules', 'exclude'];
 
         for (const optionKey of Object.keys(options)) {
-            let normalizedOptionKey = optionKey;
-            if (optionKey === 'include_node_modules') {
-                logger.deprecation('configureBabel: "include_node_modules" is deprecated. Please use "includeNodeModules" instead.');
-                normalizedOptionKey = 'includeNodeModules';
-            }
-
-            if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(normalizedOptionKey)) {
-                logger.warning(`The "${normalizedOptionKey}" option of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babel.config.js" file or "babel" key in "package.json").`);
+            if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(optionKey)) {
+                logger.warning(`The "${optionKey}" option of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babelrc.config.js" file or "babel" key in "package.json").`);
                 continue;
             }
 
-            if (normalizedOptionKey === 'includeNodeModules') {
+            if (optionKey === 'includeNodeModules') {
                 if (Object.keys(options).includes('exclude')) {
                     throw new Error('"includeNodeModules" and "exclude" options can\'t be used together when calling configureBabel().');
                 }
@@ -454,10 +448,10 @@ class WebpackConfig {
                     // Exclude other modules
                     return true;
                 };
-            } else if (!(normalizedOptionKey in this.babelOptions)) {
-                throw new Error(`Invalid option "${normalizedOptionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
+            } else if (!(optionKey in this.babelOptions)) {
+                throw new Error(`Invalid option "${optionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
             } else {
-                this.babelOptions[normalizedOptionKey] = options[optionKey];
+                this.babelOptions[optionKey] = options[optionKey];
             }
         }
     }
@@ -490,6 +484,19 @@ class WebpackConfig {
         this.styleLoaderConfigurationCallback = 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;
     }
@@ -499,10 +506,6 @@ class WebpackConfig {
     }
 
     splitEntryChunks() {
-        if (this.sharedCommonsEntryName) {
-            throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
-        }
-
         this.shouldSplitEntryChunks = true;
     }
 
@@ -530,28 +533,6 @@ class WebpackConfig {
         this.devServerOptionsConfigurationCallback = callback;
     }
 
-    createSharedEntry(name, file) {
-        logger.deprecation('Encore.createSharedEntry() is deprecated and will be removed in a future version, please use Encore.splitEntryChunks() or Encore.addCacheGroup() instead.');
-
-        if (this.shouldSplitEntryChunks) {
-            throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
-        }
-
-        // don't allow to call this twice
-        if (this.sharedCommonsEntryName) {
-            throw new Error('createSharedEntry() cannot be called multiple times: you can only create *one* shared entry.');
-        }
-
-        if (Array.isArray(file)) {
-            throw new Error('Argument 2 to createSharedEntry() must be a single string file: not an array of files. Try creating one file that requires/imports all the modules that should be included.');
-        }
-
-        this.sharedCommonsEntryName = name;
-        this.sharedCommonsEntryFile = file;
-
-        this.addEntry(name, file);
-    }
-
     addCacheGroup(name, options) {
         if (typeof name !== 'string') {
             throw new Error('Argument 1 to addCacheGroup() must be a string.');
@@ -650,17 +631,11 @@ class WebpackConfig {
         this.sassLoaderOptionsCallback = sassLoaderOptionsCallback;
 
         for (const optionKey of Object.keys(options)) {
-            let normalizedOptionKey = optionKey;
-            if (optionKey === 'resolve_url_loader') {
-                logger.deprecation('enableSassLoader: "resolve_url_loader" is deprecated. Please use "resolveUrlLoader" instead.');
-                normalizedOptionKey = 'resolveUrlLoader';
-            }
-
-            if (!(normalizedOptionKey in this.sassOptions)) {
-                throw new Error(`Invalid option "${normalizedOptionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
+            if (!(optionKey in this.sassOptions)) {
+                throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
             }
 
-            this.sassOptions[normalizedOptionKey] = options[optionKey];
+            this.sassOptions[optionKey] = options[optionKey];
         }
     }