fix(webpack): register WebP imagemin in plugins for dev, avoid duplicate instance

Move ImageMinimizerPlugin to plugins (generator + optional prod minifier) so
?as=webp works when minimization is off. Remove it from optimization.minimizer
to keep a single instance and avoid asset name conflicts. Minor shorthand for mode in dev/prod config.

Author: firestar300

config/plugins.js

@@ -1,4 +1,6 @@
 const path = require('path')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
+const svgoconfig = require('./svgo.config')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
 const ESLintPlugin = require('eslint-webpack-plugin')
@@ -15,7 +17,38 @@ const SpriteHashPlugin = require('./webpack-sprite-hash-plugin')
 
 module.exports = {
 	get: function (mode) {
+		const isProduction = mode === 'production'
+		// A single instance: `optimization.minimizer` is only `apply()`'d when `minimize: true`
+		// (see webpack `WebpackOptionsApply.js`), so WebP `?as=webp` must live on the main
+		// `plugins` list to work with `yarn start` / dev. Image minify runs on `processAssets`
+		// from this same plugin in production only (keeps dev watch fast).
+		const imageMinimizerOptions = {
+			loader: true,
+			generator: [
+				{
+					preset: 'webp',
+					implementation: ImageMinimizerPlugin.imageminGenerate,
+					options: {
+						plugins: ['imagemin-webp'],
+					},
+				},
+			],
+		}
+		if (isProduction) {
+			imageMinimizerOptions.minimizer = {
+				implementation: ImageMinimizerPlugin.imageminMinify,
+				options: {
+					plugins: [
+						['gifsicle', { interlaced: true }],
+						['jpegtran', { progressive: true }],
+						['optipng', { optimizationLevel: 5 }],
+						['svgo', { svgoconfig }],
+					],
+				},
+			}
+		}
 		const plugins = [
+			new ImageMinimizerPlugin(imageMinimizerOptions),
 			new WebpackThemeJsonPlugin({
 				watch: mode !== 'production',
 			}),

config/webpack.common.js

@@ -1,8 +1,6 @@
 const path = require('path')
 const entries = require('./entries')
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
-const svgoconfig = require('./svgo.config')
 
 module.exports = {
 	entry: entries,
@@ -14,31 +12,6 @@ module.exports = {
 	},
 	optimization: {
 		minimizer: [
-			new ImageMinimizerPlugin({
-				minimizer: {
-					implementation: ImageMinimizerPlugin.imageminMinify,
-					options: {
-						// Lossless optimization with custom option
-						// Feel free to experiment with options for better result for you
-						plugins: [
-							['gifsicle', { interlaced: true }],
-							['jpegtran', { progressive: true }],
-							['optipng', { optimizationLevel: 5 }],
-							// Svgo configuration here https://github.com/svg/svgo#configuratio
-							['svgo', { svgoconfig }],
-						],
-					},
-				},
-				generator: [
-					{
-						preset: 'webp',
-						implementation: ImageMinimizerPlugin.imageminGenerate,
-						options: {
-							plugins: ['imagemin-webp'],
-						},
-					},
-				],
-			}),
 			new TerserPlugin({
 				parallel: true,
 				terserOptions: {

config/webpack.dev.js

@@ -6,7 +6,7 @@ const loaders = require('./loaders')
 const mode = 'development'
 
 module.exports = merge(common, {
-	mode: mode,
+	mode,
 	stats: 'errors-only',
 	devtool: 'inline-source-map',
 	devServer: {

config/webpack.prod.js

@@ -5,7 +5,7 @@ const loaders = require('./loaders')
 const mode = 'production'
 
 module.exports = merge(common, {
-	mode: mode,
+	mode,
 	stats: 'minimal',
 	output: {
 		filename: '[name]-min.js',