Add various methods to configure default plugins

Author: Lyrkan

index.js

@@ -102,14 +102,90 @@ const publicApi = {
         return this;
     },
 
+    /**
+     * Allows you to configure the options passed to the DefinePlugin
+     * A list of available options can be found at https://webpack.js.org/plugins/define-plugin/
+     *
+     * For example:
+     *
+     *      Encore.configureDefinePlugin((options) => {
+     *          options.VERSION = JSON.stringify('1.0.0');
+     *      })
+     *
+     * @param {function} definePluginOptionsCallback
+     * @returns {exports}
+     */
+    configureDefinePlugin(definePluginOptionsCallback = () => {}) {
+        webpackConfig.configureDefinePlugin(definePluginOptionsCallback);
+
+        return this;
+    },
+
+    /**
+     * Allows you to configure the options passed to the extract-text-webpack-plugin.
+     * A list of available options can be found at https://github.com/webpack-contrib/extract-text-webpack-plugin
+     *
+     * For example:
+     *
+     *      Encore.configureExtractTextPlugin((options) => {
+     *          options.ignoreOrder = true;
+     *      })
+     *
+     * @param {function} extractTextPluginOptionsCallback
+     * @returns {exports}
+     */
+    configureExtractTextPlugin(extractTextPluginOptionsCallback = () => {}) {
+        webpackConfig.configureExtractTextPlugin(extractTextPluginOptionsCallback);
+
+        return this;
+    },
+
+    /**
+     * Allows you to configure the options passed to the friendly-errors-webpack-plugin.
+     * A list of available options can be found at https://github.com/geowarin/friendly-errors-webpack-plugin
+     *
+     * For example:
+     *
+     *      Encore.configureFriendlyErrorsPlugin((options) => {
+     *          options.clearConsole = true;
+     *      })
+     *
+     * @param {function} friendlyErrorsPluginOptionsCallback
+     * @returns {exports}
+     */
+    configureFriendlyErrorsPlugin(friendlyErrorsPluginOptionsCallback = () => {}) {
+        webpackConfig.configureFriendlyErrorsPlugin(friendlyErrorsPluginOptionsCallback);
+
+        return this;
+    },
+
+    /**
+     * Allows you to configure the options passed to the LoaderOptionsPlugins
+     * A list of available options can be found at https://webpack.js.org/plugins/loader-options-plugin/
+     *
+     * For example:
+     *
+     *      Encore.configureLoaderOptionsPlugin((options) => {
+     *          options.minimize = true;
+     *      })
+     *
+     * @param {function} loaderOptionsPluginOptionsCallback
+     * @returns {exports}
+     */
+    configureLoaderOptionsPlugin(loaderOptionsPluginOptionsCallback = () => {}) {
+        webpackConfig.configureLoaderOptionsPlugin(loaderOptionsPluginOptionsCallback);
+
+        return this;
+    },
+
     /**
      * Allows you to configure the options passed to webpack-manifest-plugin.
      * A list of available options can be found at https://github.com/danethurber/webpack-manifest-plugin
      *
      * For example:
      *
-     *      Encore.configureManifestPlugin(function(options){
-     *          options.fileName: '../../var/assets/manifest.json'
+     *      Encore.configureManifestPlugin((options) => {
+     *          options.fileName = '../../var/assets/manifest.json';
      *      })
      *
      * @param {function} manifestPluginOptionsCallback
@@ -121,6 +197,26 @@ const publicApi = {
         return this;
     },
 
+    /**
+     * Allows you to configure the options passed to the uglifyjs-webpack-plugin
+     * A list of available options can be found at https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
+     *
+     * For example:
+     *
+     *      Encore.configureUglifyJsPlugin((options) => {
+     *          options.compress = false;
+     *          options.beautify = true;
+     *      })
+     *
+     * @param {function} uglifyJsPluginOptionsCallback
+     * @returns {exports}
+     */
+    configureUglifyJsPlugin(uglifyJsPluginOptionsCallback = () => {}) {
+        webpackConfig.configureUglifyJsPlugin(uglifyJsPluginOptionsCallback);
+
+        return this;
+    },
+
     /**
      * Adds a JavaScript file that should be webpacked:
      *

lib/WebpackConfig.js

@@ -30,40 +30,56 @@ function validateRuntimeConfig(runtimeConfig) {
 class WebpackConfig {
     constructor(runtimeConfig) {
         validateRuntimeConfig(runtimeConfig);
+
         this.runtimeConfig = runtimeConfig;
-        this.outputPath = null;
-        this.publicPath = null;
-        this.manifestKeyPrefix = null;
         this.entries = new Map();
         this.styleEntries = new Map();
         this.plugins = [];
+        this.loaders = [];
+
+        // Global settings
+        this.outputPath = null;
+        this.publicPath = null;
+        this.manifestKeyPrefix = null;
+        this.sharedCommonsEntryName = null;
+        this.providedVariables = {};
+        this.configuredFilenames = {};
+
+        // Features/Loaders flags
         this.useVersioning = false;
         this.useSourceMaps = false;
+        this.cleanupOutput = false;
+        this.useImagesLoader = true;
+        this.useFontsLoader = true;
         this.usePostCssLoader = false;
-        this.postCssLoaderOptionsCallback = function() {};
-        this.useSassLoader = false;
-        this.sassLoaderOptionsCallback = function() {};
-        this.sassOptions = {
-            resolve_url_loader: true
-        };
         this.useLessLoader = false;
-        this.lessLoaderOptionsCallback = function() {};
-        this.cleanupOutput = false;
-        this.sharedCommonsEntryName = null;
-        this.providedVariables = {};
-        this.babelConfigurationCallback = function() {};
+        this.useSassLoader = false;
         this.useReact = false;
         this.useVueLoader = false;
-        this.vueLoaderOptionsCallback = () => {};
-        this.loaders = [];
         this.useTypeScriptLoader = false;
-        this.tsConfigurationCallback = function() {};
         this.useForkedTypeScriptTypeChecking = false;
+
+        // Features/Loaders options
+        this.sassOptions = {
+            resolve_url_loader: true
+        };
+
+        // Features/Loaders options callbacks
+        this.postCssLoaderOptionsCallback = () => {};
+        this.sassLoaderOptionsCallback = () => {};
+        this.lessLoaderOptionsCallback = () => {};
+        this.babelConfigurationCallback = () => {};
+        this.vueLoaderOptionsCallback = () => {};
+        this.tsConfigurationCallback = () => {};
+
+        // Plugins callbacks
+        this.definePluginOptionsCallback = () => {};
+        this.extractTextPluginOptionsCallback = () => {};
         this.forkedTypeScriptTypesCheckOptionsCallback = () => {};
-        this.useImagesLoader = true;
-        this.useFontsLoader = true;
-        this.configuredFilenames = {};
-        this.manifestPluginOptionsCallback = function() {};
+        this.friendlyErrorsPluginOptionsCallback = () => {};
+        this.loaderOptionsPluginOptionsCallback = () => {};
+        this.manifestPluginOptionsCallback = () => {};
+        this.uglifyJsPluginOptionsCallback = () => {};
     }
 
     getContext() {
@@ -118,6 +134,38 @@ class WebpackConfig {
         this.manifestKeyPrefix = manifestKeyPrefix;
     }
 
+    configureDefinePlugin(definePluginOptionsCallback = () => {}) {
+        if (typeof definePluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureDefinePlugin() must be a callback function');
+        }
+
+        this.definePluginOptionsCallback = definePluginOptionsCallback;
+    }
+
+    configureExtractTextPlugin(extractTextPluginOptionsCallback = () => {}) {
+        if (typeof extractTextPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureExtractTextPlugin() must be a callback function');
+        }
+
+        this.extractTextPluginOptionsCallback = extractTextPluginOptionsCallback;
+    }
+
+    configureFriendlyErrorsPlugin(friendlyErrorsPluginOptionsCallback = () => {}) {
+        if (typeof friendlyErrorsPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureFriendlyErrorsPlugin() must be a callback function');
+        }
+
+        this.friendlyErrorsPluginOptionsCallback = friendlyErrorsPluginOptionsCallback;
+    }
+
+    configureLoaderOptionsPlugin(loaderOptionsPluginOptionsCallback = () => {}) {
+        if (typeof loaderOptionsPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureLoaderOptionsPlugin() must be a callback function');
+        }
+
+        this.loaderOptionsPluginOptionsCallback = loaderOptionsPluginOptionsCallback;
+    }
+
     configureManifestPlugin(manifestPluginOptionsCallback = () => {}) {
         if (typeof manifestPluginOptionsCallback !== 'function') {
             throw new Error('Argument 1 to configureManifestPlugin() must be a callback function');
@@ -126,6 +174,14 @@ class WebpackConfig {
         this.manifestPluginOptionsCallback = manifestPluginOptionsCallback;
     }
 
+    configureUglifyJsPlugin(uglifyJsPluginOptionsCallback = () => {}) {
+        if (typeof uglifyJsPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureUglifyJsPlugin() must be a callback function');
+        }
+
+        this.uglifyJsPluginOptionsCallback = uglifyJsPluginOptionsCallback;
+    }
+
     /**
      * Returns the value that should be used as the publicPath,
      * which can be overridden by enabling the webpackDevServer

lib/config-generator.js

@@ -26,7 +26,7 @@ const loaderOptionsPluginUtil = require('./plugins/loader-options');
 const versioningPluginUtil = require('./plugins/versioning');
 const variableProviderPluginUtil = require('./plugins/variable-provider');
 const cleanPluginUtil = require('./plugins/clean');
-const commonChunksPluginUtil = require('./plugins/common-chunks');
+const commonsChunksPluginUtil = require('./plugins/commons-chunks');
 const definePluginUtil = require('./plugins/define');
 const uglifyPluginUtil = require('./plugins/uglify');
 const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
@@ -220,13 +220,13 @@ class ConfigGenerator {
 
         cleanPluginUtil(plugins, this.webpackConfig, ['**/*']);
 
-        commonChunksPluginUtil(plugins, this.webpackConfig);
+        commonsChunksPluginUtil(plugins, this.webpackConfig);
 
-        // todo - options here should be configurable
         definePluginUtil(plugins, this.webpackConfig);
+
         uglifyPluginUtil(plugins, this.webpackConfig);
 
-        let friendlyErrorPlugin = friendlyErrorPluginUtil();
+        const friendlyErrorPlugin = friendlyErrorPluginUtil(this.webpackConfig);
         plugins.push(friendlyErrorPlugin);
 
         assetOutputDisplay(plugins, this.webpackConfig, friendlyErrorPlugin);

lib/plugins/common-chunks.js renamed to lib/plugins/commons-chunks.js

@@ -14,21 +14,24 @@ const webpack = require('webpack');
 /**
  * @param {Array} plugins
  * @param {WebpackConfig} webpackConfig
- * @param {Object} defineOptions
  * @return {void}
  */
-module.exports = function(plugins, webpackConfig, defineOptions = {}) {
+module.exports = function(plugins, webpackConfig) {
 
     if (!webpackConfig.isProduction()) {
         return;
     }
 
-    let defineConfig = Object.assign({}, defineOptions, {
+    const definePluginOptions = {
         'process.env': {
             NODE_ENV: '"production"'
         }
-    });
-    let define = new webpack.DefinePlugin(defineConfig);
+    };
 
-    plugins.push(define);
+    webpackConfig.definePluginOptionsCallback.apply(
+        definePluginOptions,
+        [definePluginOptions]
+    );
+
+    plugins.push(new webpack.DefinePlugin(definePluginOptions));
 };

lib/plugins/define.js

@@ -14,10 +14,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 /**
  * @param {Array} plugins
  * @param {WebpackConfig} webpackConfig
- * @param {Object} extractTextOptions Options to pass to the plugin
  * @return {void}
  */
-module.exports = function(plugins, webpackConfig, extractTextOptions = {}) {
+module.exports = function(plugins, webpackConfig) {
 
     /*
      * All CSS/SCSS content (due to the loaders above) will be
@@ -37,13 +36,18 @@ module.exports = function(plugins, webpackConfig, extractTextOptions = {}) {
         filename = webpackConfig.configuredFilenames.css;
     }
 
-    let config = Object.assign({}, extractTextOptions, {
+    const extractTextPluginOptions = {
         filename: filename,
         // if true, async CSS (e.g. loaded via require.ensure())
         // is extracted to the entry point CSS. If false, it's
         // inlined in the AJAX-loaded .js file.
         allChunks: false
-    });
+    };
 
-    plugins.push(new ExtractTextPlugin(config));
+    webpackConfig.extractTextPluginOptionsCallback.apply(
+        extractTextPluginOptions,
+        [extractTextPluginOptions]
+    );
+
+    plugins.push(new ExtractTextPlugin(extractTextPluginOptions));
 };

lib/plugins/extract-text.js

@@ -18,10 +18,11 @@ const vueUnactivatedLoaderTransformer = require('../friendly-errors/transformers
 const vueUnactivatedLoaderFormatter = require('../friendly-errors/formatters/vue-unactivated-loader-error');
 
 /**
+ * @param {WebpackConfig} webpackConfig
  * @return {FriendlyErrorsWebpackPlugin}
  */
-module.exports = function() {
-    return new FriendlyErrorsWebpackPlugin({
+module.exports = function(webpackConfig) {
+    const friendlyErrorsPluginOptions = {
         clearConsole: false,
         additionalTransformers: [
             missingLoaderTransformer,
@@ -36,5 +37,12 @@ module.exports = function() {
         compilationSuccessInfo: {
             messages: []
         }
-    });
+    };
+
+    webpackConfig.friendlyErrorsPluginOptionsCallback.apply(
+        friendlyErrorsPluginOptions,
+        [friendlyErrorsPluginOptions]
+    );
+
+    return new FriendlyErrorsWebpackPlugin(friendlyErrorsPluginOptions);
 };

lib/plugins/friendly-errors.js

@@ -17,7 +17,6 @@ const webpack = require('webpack');
  * @return {void}
  */
 module.exports = function(plugins, webpackConfig) {
-
     /*
      * This section is a bit mysterious. The "minimize"
      * true is read and used to minify the CSS.
@@ -27,11 +26,18 @@ module.exports = function(plugins, webpackConfig) {
      * not totally sure what's going on here
      * https://github.com/jtangelder/sass-loader/issues/285
      */
-    plugins.push(new webpack.LoaderOptionsPlugin({
+    const loaderOptionsPluginOptions = {
         debug: !webpackConfig.isProduction(),
         options: {
             context: webpackConfig.getContext(),
             output: { path: webpackConfig.outputPath }
         }
-    }));
+    };
+
+    webpackConfig.loaderOptionsPluginOptionsCallback.apply(
+        loaderOptionsPluginOptions,
+        [loaderOptionsPluginOptions]
+    );
+
+    plugins.push(new webpack.LoaderOptionsPlugin(loaderOptionsPluginOptions));
 };