Webpack Helpers v1 Beta: Webpack 5, addFilter()

.eslintrc.js

@@ -105,7 +105,7 @@ module.exports = {
 		'new-parens': 'error',
 		'newline-after-var': 'off',
 		'newline-before-return': 'off',
-		'newline-per-chained-call': 'error',
+		'newline-per-chained-call': 'off',
 		'no-alert': 'error',
 		'no-array-constructor': 'error',
 		'no-async-promise-executor': 'error',
@@ -127,7 +127,7 @@ module.exports = {
 		'no-extra-label': 'error',
 		'no-extra-parens': 'off',
 		'no-floating-decimal': 'error',
-		'no-implicit-coercion': 'error',
+		'no-implicit-coercion': 'off',
 		'no-implicit-globals': 'error',
 		'no-implied-eval': 'error',
 		'no-inline-comments': 'error',

.travis.yml

@@ -1,11 +1,12 @@
 language: node_js
 script: "npm run lint && npm run test && npm run test-build"
 node_js:
-  - node
   - lts/*
+  - 16
+  - 14
   - 12
-  - 10
 branches:
   only:
     - main
     - beta
+    - v1

babel-preset.js

@@ -2,12 +2,7 @@ module.exports = ( api ) => {
 	api.cache.forever();
 
 	return {
-		presets: [ '@wordpress/default' ],
-		plugins: [
-			'@babel/plugin-proposal-class-properties',
-			[ 'transform-react-jsx', {
-				pragma: 'wp.element.createElement',
-			} ],
-		],
+		presets: [ '@wordpress/babel-preset-default' ],
+		plugins: [ '@babel/plugin-proposal-class-properties' ],
 	};
 };

docs/changelog.md

@@ -6,8 +6,15 @@ nav_order: 10
 
 # Changelog
 
-## Next
-
+## v1.0
+
+- **Breaking**: End support for Node v10. Node v12.13 or later is now required.
+- **Breaking**: Switch to Webpack 5 and Webpack DevServer 4
+- **Breaking**: Replace `filterLoaders` system with [individual hooks accesible via the new `addFilter` helper](https://humanmade.github.io/webpack-helpers/modules/presets.html#customizing-presets).
+- **Potentially Breaking**: Remove `loaders.url()` and `loaders.file()` in favor of Webpack 5 [`asset` modules](https://webpack.js.org/guides/asset-modules/), now usable by including `loaders.asset()` (for assets which can be inlined) and `loaders.resource()` (as a catch-all for other types) in your module rules list. Asset modules are handled automatically in both presets, so this is only breaking if `loaders.url()` or `loaders.file()` was used directly.
+- **Potentially Breaking**: Remove `loaders.url()` in favor of Webpack 5 [`asset` modules](https://webpack.js.org/guides/asset-modules/), now usable by including `loaders.asset()` in your module rules list. Asset modules are handled automatically in both presets, so this is only breaking if `loaders.url()` was used directly.
+- Remove `OptimizeCssAssetsPlugin` (`plugins.optimizeCssAssets()`) in favor of Webpack 5-compatible [CssMinimizerPlugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) (`plugins.cssMinimizer()`)
+- Remove `plugins.hotModuleReplacement()`, which is now handled automatically by the DevServer in `hot` mode.
 - Include the `contenthash` in generated CSS filenames. [#204](https://github.com/humanmade/webpack-helpers/pull/204)
 
 ## v0.11.1

docs/modules/loaders.md

@@ -10,15 +10,16 @@ nav_order: 3
 
 This module provides functions that generate configurations for commonly-needed Webpack loaders. Use them within the `.module.rules` array, or use `presets.development()`/`presets.production()` to opt-in to some opinionated defaults.
 
+- `loaders.assets()`: Return a configured Webpack module loader rule for [`asset` modules](https://webpack.js.org/guides/asset-modules/#inlining-assets) which will be inlined if small enough.
 - `loaders.eslint()`: Return a configured Webpack module loader rule for `eslint-loader`.
 - `loaders.js()`: Return a configured Webpack module loader rule for `js-loader`.
 - `loaders.ts()`: Return a configured Webpack module loader rule for `ts-loader`.
-- `loaders.url()`: Return a configured Webpack module loader rule for `url-loader`.
 - `loaders.style()`: Return a configured Webpack module loader rule for `style-loader`.
 - `loaders.css()`: Return a configured Webpack module loader rule for `css-loader`.
 - `loaders.postcss()`: Return a configured Webpack module loader rule for `postcss-loader`.
 - `loaders.sass()`: Return a configured Webpack module loader rule for `sass-loader`.
-- `loaders.file()`: Return a configured Webpack module loader rule for `file-loader`.
+- `loaders.sourcemaps()`: Return a configured Webpack module loader rule for `source-map-loader`.
+- `loaders.resource()`: Return a configured Webpack module loader rule for [`asset/resource` modules](https://webpack.js.org/guides/asset-modules/#resource-assets).
 
 ## Customizing Loaders
 

docs/modules/plugins.md

@@ -17,11 +17,9 @@ This module provides methods which create new instances of commonly-needed Webpa
   | `plugins.copy()` | Create and return a new [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) instance.
   | `plugins.errorBell()` | Create and return a new [`bell-on-bundle-error-plugin`](https://www.npmjs.com/package/bell-on-bundler-error-plugin) instance.
   | `plugins.fixStyleOnlyEntries()` | Create and return a [`webpack-fix-style-only-entries`](https://github.com/fqborges/webpack-fix-style-only-entries) instance to remove empty JS bundles for style-only entrypoints.
-**D**  | `plugins.hotModuleReplacement()` | Create and return a new [`webpack.HotModuleReplacementPlugin`](https://webpack.js.org/plugins/hot-module-replacement-plugin/) instance.
   | `plugins.manifest()` | : Create and return a new [`webpack-manifest-plugin`](https://github.com/danethurber/webpack-manifest-plugin) instance, preconfigured to write the manifest file while running from a dev server.
 **P**  | `plugins.miniCssExtract()` | Create and return a new [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) instance.
 **P**  | `plugins.terser()` | Create and return a new [`terser-webpack-plugin`](https://github.com/webpack-contrib/terser-webpack-plugin) instance, preconfigured with defaults based on `create-react-app`.
+**P**  | `plugins.cssMinimizer()` | Create and return a new [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) instance.
 
 **P**: Included in `presets.production()`
-
-**D**: Included in `presets.development()`

docs/modules/presets.md

@@ -91,7 +91,6 @@ module.exports = {
 
 [Read up on the `...` "spread operator"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) if this syntax is unfamiliar to you; it's quite useful!
 
-
 Customize a generated production configuration by object mutation:
 
 ```js
@@ -109,27 +108,37 @@ module.exports.optimization.minimizer = [
 ];
 ```
 
-Note that array values are _merged_, not overwritten. This allows you to easily add plugins, but it can make it hard to _remove_ values from array properties like the module loader rules. To change loader configuration options without completely removing a loader, we recommend the approach described below in "Customizing Loaders". However, if you do need to completely change or remove the loaders from a default, you may overwrite the `.module.rules` array using one of the above methods.
-
-### Modify loaders within a generated configuration
+### Filtering values
 
-Adjusting loaders within a generated configuration tree is difficult because loader arrays are not keyed and module rules may be nested. Instead, each `preset` generator accepts a second argument in which you can pass a callback function that will be run on the output of each computed loader definition.
+Array values are _merged_ when processing a preset, not overwritten. This allows you to easily add plugins, but it can make it hard to _remove_ values from array properties like the module loader rules or plugins list. To change loader configuration options without completely removing a loader, or adjust loaders deep within a generated configuration tree, this library provides a `addFilter` helper function. `addFilter()` lets you register a callback which can transform the value of each computed loader, as well as some other useful configuration values.
 
 ```js
-// Alter the publicPath value of the files-loader and url-loader.
+const { addFilter } = require( 'helpers' );
+
+// Intercept the "sass" loader and replace it with a Stylus loader.
+addFilter( 'loader/sass', () => {
+	return {
+		loader: require.resolve( 'stylus-loader' ),
+	};
+} );
+// Alter presets to use a different targeting regular expression.
+addFilter( 'preset/stylesheet-loaders', ( loader ) => {
+	loader.test = /.\styl$/;
+	return loader;
+} );
+
+// Now, use the preset as normal and it will pick up Stylus files instead!
 const config = production.preset(
-	{ /* ...configuration options described above ... */ },
-	{
-		filterLoaders: ( loader, loaderType ) => {
-			if ( loaderType === 'file' || loaderType === 'url' ) {
-				loader.options.publicPath = '../../';
-			}
-			return loader;
-		}
-	}
+	{ /* ...normal configuration options as described above ... */ }
 );
 ```
 
-The `loaderType` option will be [one of the keys in the `loaders` object](./loaders.html), or else the special key `stylesheet` which will be passed alongside the entire computed stylesheet loader chain. Filter on `stylesheet` to, for example, completely replace the Sass stylesheet support with a different preprocessor like Stylus.
+Available hooks:
 
-The values of the `loaderType` argument in this callback correspond to the names of the available [loader factory functions](https://humanmade.github.io/webpack-helpers/modules/loaders.html).
+- `loader/{loader name}`: Adjust the final output of [any of the methods on the `loaders` object](./loaders.html), for example `loader/sass` or `loader/js`.
+- `loader/{loader name}/default`: Alter the default values before passing it to the loader configuration merge function.
+- `loader/postcss/plugins`: Filter the list of PostCSS plugins used by that specific loader.
+- `loader/postcss/preset-env`: Filter the configuration object passed to the PostCSS Preset Env plugin.
+- `preset/stylesheet-loaders`: Filter the computed chain of stylesheet loaders for both dev and production presets.
+- `preset/dev/stylesheet-loaders`: Filter the stylesheet loader chain for only the dev configuration.
+- `preset/prod/stylesheet-loaders`: Filter the stylesheet loader chain for only the production configuration.

index.js

@@ -6,6 +6,7 @@ module.exports = {
 	config: require( './src/config' ),
 	externals: require( './src/externals' ),
 	helpers: {
+		addFilter: require( './src/helpers/filters' ).addFilter,
 		choosePort: require( './src/helpers/choose-port' ),
 		cleanOnExit: require( './src/helpers/clean-on-exit' ),
 		filePath: require( './src/helpers/file-path' ),

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@humanmade/webpack-helpers",
   "public": true,
-  "version": "0.11.1",
+  "version": "1.0.0-beta.1",
   "description": "Reusable Webpack configuration components & related helper utilities.",
   "main": "index.js",
   "author": "Human Made",
@@ -29,53 +29,51 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^7.17.0",
+    "eslint": "^7.32.0",
     "jest": "^26.6.3",
-    "sass": "^1.32.4",
-    "typescript": "^4.0.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "sass": "^1.51.0",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
   },
   "dependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@wordpress/babel-preset-default": "^4.16.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@wordpress/babel-preset-default": "^6.9.0",
+    "babel-loader": "^8.2.5",
     "bell-on-bundler-error-plugin": "^2.0.0",
-    "block-editor-hmr": "^0.6.1",
-    "chalk": "^4.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "css-loader": "^5.0.1",
+    "block-editor-hmr": "^0.6.3",
+    "chalk": "^4.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port-alt": "^1.1.6",
     "eslint-loader": "^4.0.2",
-    "file-loader": "^6.0.0",
-    "inquirer": "^7.2.0",
     "is-root": "^2.1.0",
-    "mini-css-extract-plugin": "^1.3.4",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss": "^8.2.4",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.4.12",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^4.1.0",
-    "postcss-preset-env": "^6.7.0",
-    "run-parallel": "1.1.9",
-    "sass-loader": "^10.0.2",
-    "signal-exit": "^3.0.2",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.0",
-    "ts-loader": "^8.0.1",
-    "url-loader": "^4.1.0",
-    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-fix-style-only-entries": "^0.6.0",
-    "webpack-manifest-plugin": "^3.0.0"
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.4.4",
+    "prompts": "^2.4.2",
+    "run-parallel": "^1.2.0",
+    "sass-loader": "^12.6.0",
+    "signal-exit": "^3.0.7",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.2.9",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-fix-style-only-entries": "^0.6.1",
+    "webpack-manifest-plugin": "^5.0.0"
   },
   "peerDependencies": {
     "sass": "*",
     "typescript": "*",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.0",
-    "webpack-dev-server": "^3.0.0"
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^4.0.0"
   }
 }

src/config.js

@@ -7,14 +7,15 @@ module.exports = {
 	 * @type {Object}
 	 */
 	devServer: {
-		disableHostCheck: true,
+		allowedHosts: 'all',
 		headers: {
 			'Access-Control-Allow-Origin': '*',
+			'Access-Control-Allow-Methods': '*',
+			'Access-Control-Allow-Headers': '*',
 		},
-		hotOnly: true,
-		watchOptions: {
-			aggregateTimeout: 300,
-		},
+		// Enable gzip compression of generated files.
+		compress: true,
+		hot: 'only',
 	},
 
 	/**

src/helpers/choose-port.js

@@ -8,7 +8,7 @@
  *
  */
 const chalk = require( 'chalk' );
-const inquirer = require( 'inquirer' );
+const prompts = require( 'prompts' );
 const detect = require( 'detect-port-alt' );
 const isRoot = require( 'is-root' );
 
@@ -17,6 +17,8 @@ const getProcessForPort = require( '../vendor/get-process-for-port' );
 const DEFAULT_PORT = process.env.PORT || 8080;
 const HOST = process.env.HOST || '0.0.0.0';
 
+const isInteractive = process.stdout.isTTY;
+
 /**
  * choosePort method adapted from create-react-app's `react-dev-utils`.
  *
@@ -33,25 +35,29 @@ const choosePort = ( host, defaultPort ) => detect( defaultPort, host ).then(
 		const message = process.platform !== 'win32' && defaultPort < 1024 && ! isRoot() ?
 			'Admin permissions are required to run a server on a port below 1024.' :
 			`Something is already running on port ${ defaultPort }.`;
-		// clearConsole();
-		const existingProcess = getProcessForPort( defaultPort );
-		const question = {
-			type: 'confirm',
-			name: 'shouldChangePort',
-			message: `${
-				chalk.yellow( `${ message }${
-					existingProcess ? ` Probably:\n  ${ existingProcess }` : ''
-				}` )
-			}\n\nWould you like to run the app on another port instead?`,
-			default: true,
-		};
-		inquirer.prompt( question ).then( answer => {
-			if ( answer.shouldChangePort ) {
-				resolve( port );
-			} else {
-				resolve( null );
-			}
-		} );
+		if ( isInteractive ) {
+			const existingProcess = getProcessForPort( defaultPort );
+			const question = {
+				type: 'confirm',
+				name: 'shouldChangePort',
+				message: `${
+					chalk.yellow( `${ message }${
+						existingProcess ? ` Probably:\n  ${ existingProcess }` : ''
+					}` )
+				}\n\nWould you like to run the app on another port instead?`,
+				initial: true,
+			};
+			prompts( question ).then( answer => {
+				if ( answer.shouldChangePort ) {
+					resolve( port );
+				} else {
+					resolve( null );
+				}
+			} );
+		} else {
+			console.log( chalk.red( message ) );
+			resolve( null );
+		}
 	} ),
 	err => {
 		throw new Error( `${