@nitro/webpack 6.0.9 → 6.1.0

package/lib/utils.js

@@ -15,6 +15,18 @@ function getEnrichedConfig(rule, config) {
 	return rule;
 }
 
+// load optional package
+function getOptionalPackage(x) {
+	let mod;
+	try {
+		mod = require(x);
+	} catch (error) {
+		mod = null;
+	}
+	return mod;
+}
+
 module.exports = {
 	getEnrichedConfig,
+	getOptionalPackage,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitro/webpack",
-  "version": "6.0.9",
+  "version": "6.1.0",
   "description": "nitro webpack",
   "license": "MIT",
   "author": "The Nitro Team",
@@ -23,18 +23,18 @@
     "nitro"
   ],
   "dependencies": {
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.9",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
-    "@babel/plugin-proposal-decorators": "7.17.2",
+    "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "autoprefixer": "10.4.2",
+    "autoprefixer": "10.4.4",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "5.2.7",
     "eslint": "7.32.0",
     "eslint-webpack-plugin": "2.5.4",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "file-loader": "6.2.0",
     "handlebars-loader": "1.7.1",
     "iconfont-webpack-plugin": "5.0.1",
@@ -43,16 +43,16 @@
     "js-config-webpack-plugin": "2.0.3",
     "mini-css-extract-plugin": "1.6.2",
     "optimize-css-assets-webpack-plugin": "6.0.1",
-    "postcss": "8.4.7",
+    "postcss": "8.4.12",
     "postcss-loader": "4.3.0",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.49.9",
+    "sass": "1.50.1",
     "sass-loader": "10.2.1",
     "stylelint": "13.13.1",
     "stylelint-webpack-plugin": "2.2.2",
     "svgo": "2.8.0",
     "ts-config-webpack-plugin": "2.0.3",
-    "typescript": "4.5.5",
+    "typescript": "4.6.3",
     "url-loader": "4.1.1",
     "webpack": "4.46.0",
     "webpackbar": "5.0.2",

package/webpack-config/webpack.config.prod.js

@@ -218,6 +218,17 @@ module.exports = (options = { rules: {}, features: {} }) => {
 
 	// images
 	if (options.rules.image) {
+
+		const imageminMozjpeg = utils.getOptionalPackage('imagemin-mozjpeg');
+		const imageminOptipng = utils.getOptionalPackage('imagemin-optipng');
+		const imageminPngquant = utils.getOptionalPackage('imagemin-pngquant');
+		const imageminSvgo = utils.getOptionalPackage('imagemin-svgo');
+
+		// console.log('imagemin-mozjpeg: ', imageminMozjpeg ? 'installed' : 'NOT');
+		// console.log('imagemin-optipng: ', imageminOptipng ? 'installed' : 'NOT');
+		// console.log('imagemin-pngquant: ', imageminPngquant ? 'installed' : 'NOT');
+		// console.log('imagemin-svgo: ', imageminSvgo ? 'installed' : 'NOT');
+
 		// image loader & minification
 		const imageMinificationRule = {
 			test: /\.(png|jpg|svg)$/,
@@ -226,35 +237,51 @@ module.exports = (options = { rules: {}, features: {} }) => {
 			use: {
 				loader: require.resolve('img-loader'),
 				options: {
-					plugins: [
-						require('imagemin-mozjpeg')({
-							quality: 75,
-							progressive: true,
-						}),
-						require('imagemin-optipng')({
-							optimizationLevel: 7,
-						}),
-						require('imagemin-pngquant')({
-							// floyd: 0.5,
-							// speed: 2
-						}),
-						require('imagemin-svgo')({
-							plugins: [
-								{
-									name: 'preset-default',
-									params: {
-										overrides: {
-											removeViewBox: false,
-										},
-									},
-								},
-							],
-						}),
-					],
+					plugins: [],
 				},
 			},
 		};
 
+		if (imageminMozjpeg) {
+			imageMinificationRule.use.options.plugins.push(
+				imageminMozjpeg({
+					quality: 75,
+					progressive: true,
+				})
+			);
+		}
+		if (imageminOptipng) {
+			imageMinificationRule.use.options.plugins.push(
+				imageminOptipng({
+					optimizationLevel: 7,
+				})
+			);
+		}
+		if (imageminPngquant) {
+			imageMinificationRule.use.options.plugins.push(
+				imageminPngquant({
+					// floyd: 0.5,
+					// speed: 2
+				})
+			);
+		}
+		if (imageminSvgo) {
+			imageMinificationRule.use.options.plugins.push(
+				imageminSvgo({
+					plugins: [
+						{
+							name: 'preset-default',
+							params: {
+								overrides: {
+									removeViewBox: false,
+								},
+							},
+						},
+					],
+				})
+			);
+		}
+
 		// url loader for images (for example, in CSS files)
 		// inlines assets below a limit
 		const imageRule = {