Merge branch 'master' into configure-babel-optional-callback

.appveyor.yml

@@ -3,7 +3,7 @@ cache:
   - "%LOCALAPPDATA%\\Yarn"
 
 environment:
-  nodejs_version: "6"
+  nodejs_version: "8"
 
 platform:
   - x86

.travis.yml

@@ -30,6 +30,9 @@ matrix:
     - os: linux
       node_js: "10"
       env: JOB_PART=travis:lint
+    - os: linux
+      node_js: "11"
+      env: JOB_PART=test
     - os: linux
       node_js: "10"
       env: JOB_PART=test
@@ -39,8 +42,5 @@ matrix:
     - os: linux
       node_js: "8"
       env: JOB_PART=test
-    - os: linux
-      node_js: "6"
-      env: JOB_PART=test
 
 script: npm run $JOB_PART

CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## 0.25.0
+
+ * [BC BREAK] Various dependency versions were updated, including
+   `css-loader` updated from `^1.0.0` to `^2.1.1` and `resolve-url-loader`
+   updated from `^2.3.0` to `^3.0.1`. The minimum Node version was
+   also bumped from 6 to 8. See #540 for more details.
+
+ * Added `Encore.disableCssExtraction()` if you prefer your CSS to
+   be output via the `style-loader` - #539 thank to @Lyrkan.
+
+ * Added `Encore.configureLoaderRule()` as a way to configure the
+   loader config that Encore normally handles - #509 thanks to @Kocal.
+
+ * Babel cache is no longer used for production builds to avoid a
+   bug where the cache prevents browserslist from being used - #516
+   thanks to @Lyrkan.
+
 ## 0.24.0
 
  * Add CSS modules support in Vue.js for Sass/Less/Stylus - #511

fixtures/copy/foo.css

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

fixtures/copy/foo.js

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

fixtures/copy/foo.json

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

fixtures/js/css_import.js

@@ -0,0 +1,2 @@
+
+require('./../css/h1_style.css');

index.js

@@ -12,7 +12,7 @@
 const WebpackConfig = require('./lib/WebpackConfig');
 const configGenerator = require('./lib/config-generator');
 const validator = require('./lib/config/validator');
-const PrettyError = require('pretty-error');
+const prettyError = require('./lib/utils/pretty-error');
 const logger = require('./lib/logger');
 const parseRuntime = require('./lib/config/parse-runtime');
 const chalk = require('chalk');
@@ -164,25 +164,6 @@ class Encore {
         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 {Encore}
-     */
-    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
@@ -804,6 +785,11 @@ class Encore {
      *      // automatically import polyfills where they
      *      // are needed
      *      useBuiltIns: 'usage'
+     *
+     *      // if you set useBuiltIns you also have to add
+     *      // core-js to your project using Yarn or npm and
+     *      // inform Babel of the version it will use.
+     *      corejs: 3
      * });
      *
      * Supported options:
@@ -821,17 +807,21 @@ class Encore {
      *              Can be used even if you have an external Babel configuration
      *              (a .babelrc file for instance).
      *              Cannot be used if the "exclude" option is also set
-     *      * {'usage'|'entry'|false} useBuiltIns (default='entry')
+     *      * {'usage'|'entry'|false} useBuiltIns (default=false)
      *              Set the "useBuiltIns" option of @babel/preset-env that changes
      *              how it handles polyfills (https://babeljs.io/docs/en/babel-preset-env#usebuiltins)
-     *              Using it with 'entry' will require you to import @babel/polyfill
+     *              Using it with 'entry' will require you to import core-js
      *              once in your whole app and will result in that import being replaced
      *              by individual polyfills. Using it with 'usage' will try to
      *              automatically detect which polyfills are needed for each file and
      *              add them accordingly.
      *              Cannot be used if you have an external Babel configuration (a .babelrc
      *              file for instance). In this case you can set the option directly into
      *              that configuration file.
+     *      * {number|string} corejs (default=not set)
+     *              Set the "corejs" option of @babel/preset-env.
+     *              It should contain the version of core-js you added to your project
+     *              if useBuiltIns isn't set to false.
      *
      * @param {function|null} callback
      * @param {object} encoreOptions
@@ -1058,6 +1048,22 @@ class Encore {
         return this;
     }
 
+    /**
+     * Call this if you don't want imported CSS to be extracted
+     * into a .css file. All your styles will then be injected
+     * into the page by your JS code.
+     *
+     * Internally, this disables the mini-css-extract-plugin
+     * and uses the style-loader instead.
+     *
+     * @returns {Encore}
+     */
+    disableCssExtraction() {
+        webpackConfig.disableCssExtraction();
+
+        return this;
+    }
+
     /**
      * Call this to change how the name of each output
      * file is generated.
@@ -1112,6 +1118,32 @@ class Encore {
         return this;
     }
 
+    /**
+     * Configure Webpack loaders rules (`module.rules`).
+     * This is a low-level function, be careful when using it.
+     *
+     * https://webpack.js.org/concepts/loaders/#configuration
+     *
+     * For example, if you are using Vue and ESLint loader,
+     * this is how you can configure ESLint to lint Vue files:
+     *
+     *     Encore
+     *         .enableEslintLoader()
+     *         .enableVueLoader()
+     *         .configureLoaderRule('eslint', (loaderRule) => {
+     *              loaderRule.test = /\.(jsx?|vue)/;
+     *         });
+     *
+     * @param {string} name
+     * @param {function} callback
+     * @return {Encore}
+     */
+    configureLoaderRule(name, callback) {
+        webpackConfig.configureLoaderRule(name, callback);
+
+        return this;
+    }
+
     /**
      * If enabled, the output directory is emptied between each build (to remove old files).
      *
@@ -1267,6 +1299,14 @@ class Encore {
     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().');
+    }
 }
 
 // Proxy the API in order to prevent calls to most of its methods
@@ -1301,10 +1341,7 @@ const EncoreProxy = new Proxy(new Encore(), {
                     const res = target[prop](...parameters);
                     return (res === target) ? EncoreProxy : res;
                 } catch (error) {
-                    // prettifies errors thrown by our library
-                    const pe = new PrettyError();
-
-                    console.log(pe.render(error));
+                    prettyError(error);
                     process.exit(1); // eslint-disable-line
                 }
             };
@@ -1337,10 +1374,11 @@ const EncoreProxy = new Proxy(new Encore(), {
             // Only keep the 2nd line of the stack trace:
             // - First line should be this file (index.js)
             // - Second line should be the Webpack config file
-            const pe = new PrettyError();
-            pe.skip((traceLine, lineNumber) => lineNumber !== 1);
-            const error = new Error(errorMessage);
-            console.log(pe.render(error));
+            prettyError(
+                new Error(errorMessage),
+                { skipTrace: (traceLine, lineNumber) => lineNumber !== 1 }
+            );
+
             process.exit(1); // eslint-disable-line
         }
 

lib/WebpackConfig.js

@@ -53,6 +53,7 @@ class WebpackConfig {
         this.useVersioning = false;
         this.useSourceMaps = false;
         this.cleanupOutput = false;
+        this.extractCss = true;
         this.useImagesLoader = true;
         this.useFontsLoader = true;
         this.usePostCssLoader = false;
@@ -82,7 +83,8 @@ class WebpackConfig {
         };
         this.babelOptions = {
             exclude: /(node_modules|bower_components)/,
-            useBuiltIns: 'entry',
+            useBuiltIns: false,
+            corejs: null,
         };
 
         // Features/Loaders options callbacks
@@ -100,6 +102,19 @@ class WebpackConfig {
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.handlebarsConfigurationCallback = () => {};
+        this.loaderConfigurationCallbacks = {
+            javascript: () => {},
+            css: () => {},
+            images: () => {},
+            fonts: () => {},
+            sass: () => {},
+            less: () => {},
+            stylus: () => {},
+            vue: () => {},
+            eslint: () => {},
+            typescript: () => {},
+            handlebars: () => {},
+        };
 
         // Plugins options
         this.cleanWebpackPluginPaths = ['**/*'];
@@ -109,7 +124,6 @@ class WebpackConfig {
         this.definePluginOptionsCallback = () => {};
         this.forkedTypeScriptTypesCheckOptionsCallback = () => {};
         this.friendlyErrorsPluginOptionsCallback = () => {};
-        this.loaderOptionsPluginOptionsCallback = () => {};
         this.manifestPluginOptionsCallback = () => {};
         this.terserPluginOptionsCallback = () => {};
         this.optimizeCssPluginOptionsCallback = () => {};
@@ -208,14 +222,6 @@ class WebpackConfig {
         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');
@@ -656,6 +662,10 @@ class WebpackConfig {
         this.useFontsLoader = false;
     }
 
+    disableCssExtraction() {
+        this.extractCss = false;
+    }
+
     configureFilenames(configuredFilenames = {}) {
         if (typeof configuredFilenames !== 'object') {
             throw new Error('Argument 1 to configureFilenames() must be an object.');
@@ -728,6 +738,31 @@ class WebpackConfig {
         });
     }
 
+    configureLoaderRule(name, callback) {
+        logger.warning('Be careful when using Encore.configureLoaderRule(), this is a low-level method that can potentially break Encore and Webpack when not used carefully.');
+
+        // Key: alias, Value: existing loader in `this.loaderConfigurationCallbacks`
+        const aliases = {
+            js: 'javascript',
+            ts: 'typescript',
+            scss: 'sass',
+        };
+
+        if (name in aliases) {
+            name = aliases[name];
+        }
+
+        if (!(name in this.loaderConfigurationCallbacks)) {
+            throw new Error(`Loader "${name}" is not configurable. Valid loaders are "${Object.keys(this.loaderConfigurationCallbacks).join('", "')}" and the aliases "${Object.keys(aliases).join('", "')}".`);
+        }
+
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 2 to configureLoaderRule() must be a callback function.');
+        }
+
+        this.loaderConfigurationCallbacks[name] = callback;
+    }
+
     useDevServer() {
         return this.runtimeConfig.useDevServer;
     }