Merge pull request #324 from symfony/webpack4

Hello Webpack4 ⭐️

Author: weaverryan

.travis.yml

@@ -9,13 +9,16 @@ cache:
 matrix:
   include:
     - os: linux
-      node_js: "7"
+      node_js: "10"
       env: JOB_PART=travis:lint
     - os: linux
-      node_js: "8"
+      node_js: "10"
+      env: JOB_PART=test
+    - os: linux
+      node_js: "9"
       env: JOB_PART=test
     - os: linux
-      node_js: "7"
+      node_js: "8"
       env: JOB_PART=test
     - os: linux
       node_js: "6"

CHANGELOG.md

@@ -1,5 +1,85 @@
 # CHANGELOG
 
+## 0.21.0 Webpack 4 Upgrade
+
+ * [BC BREAK] Webpack was upgraded to version 4. This includes a number of major
+   and minor changes. The changes are listed below.
+
+ * [DEPRECATION] You must now call either `Encore.enableSingleRuntimeChunk()`
+   or `Encore.disableSingleRuntimeChunk()`: not calling either method is
+   deprecated. The recommended setting is `Encore.enableSingleRuntimeChunk()`.
+   This will cause a new `runtime.js` file to be created, which must be included
+   on your page with a script tag (before any other script tags for Encore
+   JavaScript files). See the documentation above `enableSingleRuntimeChunk()` in
+   `index.js` for more details.
+
+ * [BEHAVIOR CHANGE] Previously, without any config, Babel was
+   configured to "transpile" (i.e. re-write) your JavaScript so
+   that it was compatible with all browsers that currently have
+   more than 1% of the market share. The new default behavior
+   is a bit more aggressive, and may rewrite even more code to
+   be compatible with even older browsers. The *recommendation*
+   is to add a new `browserslist` key to your `package.json` file
+   that specifies exactly what browsers you need to support. For
+   example, to get the old configuration, add the following to
+   `package.json`:
+
+```json
+{
+    "browserslist": "> 1%"
+}
+```
+
+See the [browserslist](https://github.com/browserslist/browserslist) library
+for a full description of all of the valid browser descriptions.
+
+ * Node 7 is no longer supported. This is because the new
+   `mini-css-extract-plugin` does not support it (and neither)
+   does Yarn.
+
+ * Introduced a new `configureSplitChunks()` method that can be
+   used to further configure the `optimizations.splitChunks` configuration.
+
+ * A new `entrypoints.json` file is now always output. For expert
+   use-cases, the `optimizations.splitChunks.chunks` configuration
+   can be set via `configureSplitChunks()` to `all`. Then, you
+   can write some custom server-side code to parse the `entrypoints.js`
+   so that you know which `script` and `link` tags are needed for
+   each entry.
+
+ * The "dynamic import" syntax is now supported out of the box
+   because the `@babel/plugin-syntax-dynamic-import` babel plugin
+   is always enabled. This allows you to do "Dynamic Imports"
+   as described here: https://webpack.js.org/guides/code-splitting/#dynamic-imports
+
+ * For Preact, the necessary plugin the user needs to install
+   changed from `babel-plugin-transform-react-jsx` to `@babel/plugin-transform-react-jsx`.
+
+ * The NamedModulesPlugin was removed.
+
+ * The `babel-preset-env` package (which was at version ^1.2.2) was
+   removed in favor of `@babel/preset-env`.
+
+ * ExtractTextPlugin was removed and replaced with
+   mini-css-extract-plugin. Accordingly, `extractTextPluginOptionsCallback()`
+   was removed.
+
+ * Support for CoffeeScript was entirely removed.
+
+ * A new "version check" system was added for optional dependencies.
+   Now, when you install optional plugins to support a feature, if
+   you are using an unsupported version, you will see a warning.
+   "Package recommendation" errors (i.e. when you enable a feature
+   but you are missing some packages) will also contain the version
+   in the install string when necessary (e.g. `yarn add foo@^2.0`).
+
+ * Actual lang="sass" no longer works for Vue. However, lang="scss"
+   continues to work fine.
+
+ * uglifyjs-webpack-plugin was upgraded from 0.4.6 to 1.2.5, which
+   includes using `uglify-es`. If you're using `configureUglifyJsPlugin`(),
+   the options have changed.
+
 ## 0.20.1
 
  * Upgraded webpack-manifest-plugin from 2.0.0 RC1 to ^2.0.0.

bin/encore.js

@@ -13,14 +13,20 @@
 const parseRuntime = require('../lib/config/parse-runtime');
 const context = require('../lib/context');
 const chalk = require('chalk');
+const logger = require('../lib/logger');
 
 const runtimeConfig = parseRuntime(
     require('yargs/yargs')(process.argv.slice(2)).argv,
     process.cwd()
 );
 context.runtimeConfig = runtimeConfig;
 
-// remove the command from the output
+// prevent logs from being dumped
+if (runtimeConfig.outputJson) {
+    logger.quiet();
+}
+
+// remove the command from the input
 process.argv.splice(2, 1);
 
 if (!runtimeConfig.isValidCommand) {

fixtures/js/append_to_app.js

@@ -0,0 +1 @@
+document.getElementById('app').innerHTML = document.getElementById('app').innerHTML + 'Welcome to Encore!';

fixtures/js/code_splitting_dynamic_import.js

@@ -0,0 +1,4 @@
+// use code splitting via a dynamic import
+import('./print_to_app_export').then(printToApp => {
+    printToApp.default();
+});

fixtures/js/index.coffee

@@ -0,0 +1 @@
+document.getElementById('app').innerHTML = 'Welcome to Encore!';

fixtures/js/print_to_app.js

@@ -0,0 +1,3 @@
+export default function() {
+    document.getElementById('app').innerHTML = 'Welcome to Encore!';
+}

fixtures/js/print_to_app_export.js

@@ -0,0 +1 @@
+require('./arrow_function');

fixtures/js/requires_arrow_function.js

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

fixtures/js/shared_example.js

@@ -38,11 +38,6 @@ export default {
 }
 </style>
 
-<style lang="sass">
-#app
-  color: #2c3e90
-</style>
-
 <style lang="less">
 #app {
   margin-top: 40px;

fixtures/vuejs/App.vue

@@ -123,25 +123,6 @@ class Encore {
         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 {Encore}
-     */
-    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
@@ -201,13 +182,17 @@ class Encore {
 
     /**
      * 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
+     * A list of available options can be found at https://github.com/webpack-contrib/uglifyjs-webpack-plugin
      *
      * For example:
      *
      *      Encore.configureUglifyJsPlugin((options) => {
-     *          options.compress = false;
-     *          options.beautify = true;
+     *          options.cache = true;
+     *          options.uglifyOptions = {
+     *              output: {
+     *                  comments: false
+     *              }
+     *          }
      *      })
      *
      * @param {function} uglifyJsPluginOptionsCallback
@@ -225,7 +210,7 @@ class Encore {
      *      // final output file will be main.js in the output directory
      *      Encore.addEntry('main', './path/to/some_file.js');
      *
-     * If the JavaScript file imports/requires CSS/SASS/LESS files,
+     * If the JavaScript file imports/requires CSS/Sass/LESS files,
      * then a CSS file (e.g. main.css) will also be output.
      *
      * @param {string} name       The name (without extension) that will be used
@@ -407,14 +392,98 @@ class Encore {
     }
 
     /**
-     * Add a "commons" file that holds JS shared by multiple chunks.
+     * Add a "commons" file that holds JS shared by multiple chunks/files.
      *
      * @param {string} name The chunk name (e.g. vendor to create a vendor.js)
-     * @param {string|Array}  files Array of files to put in the vendor entry
+     * @param {string} file A file whose code & imports should be put into the shared file.
      * @returns {Encore}
      */
-    createSharedEntry(name, files) {
-        webpackConfig.createSharedEntry(name, files);
+    createSharedEntry(name, file) {
+        webpackConfig.createSharedEntry(name, file);
+
+        return this;
+    }
+
+    /**
+     * Tell Webpack to output a separate runtime.js file.
+     *
+     * This file must be included via a script tag before all
+     * other JavaScript files output by Encore.
+     *
+     * The runtime.js file is useful when you plan to include
+     * multiple entry files on the same page (e.g. a layout.js entry
+     * and a page-specific entry). If you are *not* including
+     * multiple entries on the same page, you can safely disable
+     * this - disableSingleRuntimeChunk() - and remove the extra script tags.
+     *
+     * If you *do* include multiple entry files on the same page,
+     * disabling the runtime.js file has two important consequences:
+     *  A) Each entry file will contain the Webpack runtime, which
+     *     means each contains some code that is duplicated in the other.
+     *  B) If two entry files require the same module (e.g. jquery),
+     *     they will receive *different* objects - not the *same* object.
+     *     This can cause some confusion if you expect a "layout.js" entry
+     *     to be able to "initialize" some jQuery plugins, because the
+     *     jQuery required by the other entry will be a different instance,
+     *     and so won't have the plugins initialized on it.
+     *
+     * @returns {Encore}
+     */
+    enableSingleRuntimeChunk() {
+        webpackConfig.enableSingleRuntimeChunk();
+
+        return this;
+    }
+
+    /**
+     * Tell Webpack to *not* output a separate runtime.js file.
+     *
+     * See enableSingleRuntimeChunk() for more details.
+     *
+     * @returns {Encore}
+     */
+    disableSingleRuntimeChunk() {
+        webpackConfig.disableSingleRuntimeChunk();
+
+        return this;
+    }
+
+    /**
+     * Tell Webpack to "split" your entry chunks.
+     *
+     * This will mean that, instead of adding 1 script tag
+     * to your page, your server-side code will need to read
+     * the entrypoints.json file in the build directory to
+     * determine the *multiple* .js (and .css) files that
+     * should be included for each entry.
+     *
+     * This is a performance optimization, but requires extra
+     * work (described above) to support this.
+     *
+     * @returns {Encore}
+     */
+    splitEntryChunks() {
+        webpackConfig.splitEntryChunks();
+
+        return this;
+    }
+
+    /**
+     * Configure the optimization.splitChunks configuration.
+     *
+     * https://webpack.js.org/plugins/split-chunks-plugin/
+     *
+     * Encore.configureSplitChunks(function(splitChunks) {
+     *      // change the configuration
+     *
+     *      splitChunks.minSize = 0;
+     * });
+     *
+     * @param {function} callback
+     * @returns {Encore}
+     */
+    configureSplitChunks(callback) {
+        webpackConfig.configureSplitChunks(callback);
 
         return this;
     }
@@ -654,27 +723,6 @@ class Encore {
         return this;
     }
 
-    /**
-     * Call this if you plan on loading CoffeeScript files.
-     *
-     * Encore.enableCoffeeScriptLoader()
-     *
-     * Or, configure the coffee-loader options:
-     *
-     * Encore.enableCoffeeScriptLoader(function(coffeeScriptOptions) {
-     *      // http://coffeescript.org/#nodejs-usage
-     *      // coffeeScriptOptions.header = true;
-     * });
-     *
-     * @param {function} callback
-     * @returns {Encore}
-     */
-    enableCoffeeScriptLoader(callback = () => {}) {
-        webpackConfig.enableCoffeeScriptLoader(callback);
-
-        return this;
-    }
-
     /**
      * Call this to enable forked type checking for TypeScript loader
      * https://github.com/TypeStrong/ts-loader/blob/v2.3.0/README.md#faster-builds
@@ -981,6 +1029,22 @@ 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!');
+    }
 }
 
 // Proxy the API in order to prevent calls to most of its methods