Update to webpack 4 (#809)

Notable changes: * Major version updates of `webpack`, `webpack-dev-server` and `optimize-css-assets-webpack-plugin` * Uses the new webpack 4 `mode` option * Removed `@neutrinojs/chunk` in favour of the `splitChunks` feature * Removed `@neutrinojs/babel-minify` in favour of the faster `uglify-es` * Removed redundant `ModuleConcatenationPlugin` usage * Removed default of `NODE_ENV` from `@neutrinojs/env` * Replaced `extract-text-webpack-plugin` with `mini-css-extract-plugin` * Stopped pinning `webpack-sources` to v1.0.1 * Added checks to warn about changed web preset `minify` options * Added checks to enforce that users remove any legacy `vendor` entrypoints For more details on the webpack changes, see: https://github.com/webpack/webpack/releases/tag/v4.0.0 Fixes #737. Fixes #802. Closes #748. Closes #768. Closes #769. Closes #766.
neutrinojs · Apr 25, 2018 · 4284ce4 · 4284ce4
1 parent bfb0ee2
commit 4284ce4
Show file tree

Hide file tree

Showing 59 changed files with 907 additions and 1,671 deletions.
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -31,9 +31,7 @@
   * [Karma](./packages/karma/README.md)
   * [Mocha](./packages/mocha/README.md)
   * [Jest](./packages/jest/README.md)
-  * [babel-minify](./packages/babel-minify/README.md)
   * [banner](./packages/banner/README.md)
-  * [chunk](./packages/chunk/README.md)
   * [clean](./packages/clean/README.md)
   * [compile-loader](./packages/compile-loader/README.md)
   * [copy](./packages/copy/README.md)

diff --git a/docs/packages/babel-minify/README.md b/docs/packages/babel-minify/README.md
diff --git a/docs/packages/chunk/README.md b/docs/packages/chunk/README.md
diff --git a/docs/packages/library/README.md b/docs/packages/library/README.md
@@ -456,8 +456,6 @@ _Note: Some plugins are only available in certain environments. To override them
 | --- | --- | --- |
 | `banner` | Injects source-map-support into the main entry points of your application if detected in `dependencies` or `devDependencies` of your package.json. | Only when `source-map-support` is installed |
 | `clean` | Clears the contents of `build` prior to creating a production bundle. | `build` command |
-| `babel-minify` | Minifies source code using `BabelMinifyWebpackPlugin`. From `@neutrinojs/babel-minify`. | `NODE_ENV production` |
-| `module-concat` | Concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser. | `NODE_ENV production` |
 
 ### Override configuration
 

diff --git a/docs/packages/node/README.md b/docs/packages/node/README.md
@@ -336,7 +336,6 @@ _Note: Some plugins are only available in certain environments. To override them
 | `start-server` | Start a Node.js for the first configured main entry point. | `start` command |
 | `hot` | Enables Hot Module Replacement. | `start` command |
 | `named-modules` | Enables named modules for improved debugging and console output. From `@neutrinojs/hot`. | `start` command |
-| `module-concat` | Concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser. | `NODE_ENV production` |
 
 ### Override configuration
 

diff --git a/docs/packages/preact/README.md b/docs/packages/preact/README.md
@@ -22,7 +22,7 @@
   - Pre-configured to support CSS Modules via `*.module.css` file extensions
   - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
+  - Production-optimized bundles with minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed
 
 ## Requirements
@@ -254,19 +254,24 @@ array. You can also make these changes from the Neutrino API in custom middlewar
 
 #### Vendoring
 
-By defining an entry point named `vendor` you can split out external dependencies into a chunk separate
-from your application code.
+External dependencies are automatically split into separate chunks from the application code,
+by the new webpack [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/).
 
-_Example: Put Preact into a separate "vendor" chunk:_
+_Example: The splitChunks settings can be adjusted like so:_
 
 ```js
 module.exports = {
   use: [
     '@neutrinojs/preact',
     (neutrino) => {
       neutrino.config
-        .entry('vendor')
-          .add('preact');
+        .optimization
+          .merge({
+            splitChunks: {
+              // Decrease the minimum size before extra chunks are created, to 10KB
+              minSize: 10000
+            }
+          });
     }
   ]
 };

diff --git a/docs/packages/react-components/README.md b/docs/packages/react-components/README.md
@@ -23,7 +23,7 @@ other Neutrino middleware, so you can build, test, and publish multiple React co
   - Pre-configured to support CSS Modules via `*.module.css` file extensions
   - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
+  - Production-optimized bundles with minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed
 
 **Important! This preset does not include babel-polyfill for size reasons. If you need

diff --git a/docs/packages/react/README.md b/docs/packages/react/README.md
@@ -22,7 +22,7 @@
   - Pre-configured to support CSS Modules via `*.module.css` file extensions
   - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
+  - Production-optimized bundles with minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed
 
 ## Requirements
@@ -266,19 +266,25 @@ module.exports = {
 
 #### Vendoring
 
-By defining an entry point named `vendor` you can split out external dependencies into a chunk separate
-from your application code.
+External dependencies are automatically split into separate chunks from the application code,
+by the new webpack [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/).
 
-_Example: Put React and React DOM into a separate "vendor" chunk:_
+_Example: The splitChunks settings can be adjusted like so:_
 
 ```js
 module.exports = {
   use: [
     '@neutrinojs/react',
-    (neutrino) => neutrino.config
-      .entry('vendor')
-        .add('react')
-        .add('react-dom')
+    (neutrino) => {
+      neutrino.config
+        .optimization
+          .merge({
+            splitChunks: {
+              // Decrease the minimum size before extra chunks are created, to 10KB
+              minSize: 10000
+            }
+          });
+    }
   ]
 };
 ```

diff --git a/docs/packages/style-loader/README.md b/docs/packages/style-loader/README.md
@@ -57,15 +57,15 @@ neutrino.use(styles, {
   ruleId: 'style',
   styleUseId: 'style',
   cssUseId: 'css',
-  hotUseId: 'hot',
-  hot: true,
   modules: true,
   modulesSuffix: '-modules',
   modulesTest: /\.module.css$/,
   extractId: 'extract',
   extract: {
     plugin: {},
-    loader: {}
+    loader: {
+      filename: neutrino.options.command === 'build' ? '[name].[contenthash].css' : '[name].css'
+    }
   }
 });
 ```
@@ -89,15 +89,15 @@ module.exports = {
       ruleId: 'style',
       styleUseId: 'style',
       cssUseId: 'css',
-      hotUseId: 'hot',
-      hot: true,
       modules: true,
       modulesSuffix: '-modules',
       modulesTest: /\.module.css$/,
       extractId: 'extract',
       extract: {
         plugin: {},
-        loader: {}
+        loader: {
+          filename: neutrino.options.command === 'build' ? '[name].[contenthash].css' : '[name].css'
+        }
       }
     }]
   ]
@@ -111,8 +111,6 @@ module.exports = {
 - `ruleId`: The ID of the webpack-chain rule used to identify the stylesheet loaders
 - `styleUseId`: The ID of the webpack-chain `use` used to identify the style-loader
 - `cssUseId`: The ID of the webpack-chain `use` used to identify the css-loader
-- `hotUseId`: The ID of the  webpack-chain `use` used to identify the css-hot-loader
-- `hot`: Enable usage of CSS Hot Module Replacement. Set to `false` to disable.
 - `modules`: Enable usage of CSS modules via `*.module.css` files. Set to `false` to disable and skip defining these rules.
 - `modulesSuffix`: A suffix added to `ruleId`, `styleUseId`, `cssUseId`, `hotUseId`, and `extractId` to derive names for
 modules-related rules. For example, the default `-modules` suffix will generate a rule ID for the CSS modules rules of
@@ -234,8 +232,8 @@ The following is a list of default rules and their identifiers which can be over
 
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
-| `style` | Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css` which use `style-loader` and `css-loader`, respectively. | all |
-| `style-modules` | Allows importing CSS Modules styles from modules. Contains two loaders named `style-modules` and `css-modules` which use `style-loader` and `css-loader`, respectively. | all |
+| `style` | Allows importing CSS stylesheets from modules. By default contains two loaders named `extract` and `css` which use `MiniCssExtractPlugin.loader` and `css-loader`, respectively. If `options.extract` is `false`, then the `extract` loader is replaced by `style`, which uses `style-loader`. | all |
+| `style-modules` | Allows importing CSS Modules styles from modules. By default contains two loaders named `extract` and `css` which use `MiniCssExtractPlugin.loader` and `css-loader`, respectively. If `options.extract` is `false`, then the `extract` loader is replaced by `style`, which uses `style-loader`. | all |
 
 ### Plugins
 
@@ -246,7 +244,6 @@ _Note: Some plugins may be only available in certain environments. To override t
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
 | `extract` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
-| `extract-modules` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
 
 ## Contributing
 

diff --git a/docs/packages/vue/README.md b/docs/packages/vue/README.md
@@ -17,7 +17,7 @@
   - Pre-configured to support CSS Modules via `*.module.css` file extensions
   - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
+  - Production-optimized bundles with minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed
 
 ## Requirements
@@ -291,19 +291,24 @@ array. You can also make these changes from the Neutrino API in custom middlewar
 
 #### Vendoring
 
-By defining an entry point named `vendor` you can split out external dependencies into a chunk separate
-from your application code.
+External dependencies are automatically split into separate chunks from the application code,
+by the new webpack [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/).
 
-_Example: Put Vue into a separate "vendor" chunk:_
+_Example: The splitChunks settings can be adjusted like so:_
 
 ```js
 module.exports = {
   use: [
     '@neutrinojs/vue',
     (neutrino) => {
       neutrino.config
-        .entry('vendor')
-          .add('vue');
+        .optimization
+          .merge({
+            splitChunks: {
+              // Decrease the minimum size before extra chunks are created, to 10KB
+              minSize: 10000
+            }
+          });
     }
   ]
 };