Use mini-css-extract-plugin@^0.6.0 and embed webpack-manifest-plugin into Encore

Author: Lyrkan

.eslintignore

@@ -0,0 +1 @@
+lib/webpack/webpack-manifest-plugin.js

index.js

@@ -913,6 +913,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

@@ -146,6 +146,8 @@ class WebpackConfig {
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
+        this.miniCssExtractLoaderConfigurationCallback = () => {};
+        this.miniCssExtractPluginConfigurationCallback = () => {};
         this.loaderConfigurationCallbacks = {
             javascript: () => {},
             css: () => {},
@@ -453,6 +455,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

@@ -405,9 +405,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);

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/plugins/manifest.js

@@ -10,7 +10,7 @@
 'use strict';
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
-const ManifestPlugin = require('webpack-manifest-plugin');
+const ManifestPlugin = require('../webpack/webpack-manifest-plugin');
 const PluginPriorities = require('./plugin-priorities');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 const sharedEntryTmpName = require('../utils/sharedEntryTmpName');

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