Javascript 如果我在我的网页配置文件中添加ImageMinimizerWebpackPlugin,它会在npm运行构建时抛出一个错误
上面是我的网页配置文件。如果我删除这个imageminimizer插件,一切正常。我无法理解为什么它在npm运行构建时出错。我开始学习webpack,并尝试用SCS等建立回购协议。我想优化我的资产,如jpg和pngJavascript 如果我在我的网页配置文件中添加ImageMinimizerWebpackPlugin,它会在npm运行构建时抛出一个错误,javascript,node.js,image-processing,webpack,sass,Javascript,Node.js,Image Processing,Webpack,Sass,上面是我的网页配置文件。如果我删除这个imageminimizer插件,一切正常。我无法理解为什么它在npm运行构建时出错。我开始学习webpack,并尝试用SCS等建立回购协议。我想优化我的资产,如jpg和png const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = requi
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
entry: "./src/index.js",
mode: "production",
output: {
filename: "main.[contenthash].bundle.js",
path: path.resolve(__dirname, "./dist"),
clean: true,
assetModuleFilename: "images/[name][hash][ext]",
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }),
new HtmlWebpackPlugin({
template: "./index.html",
}),
new ImageMinimizerPlugin({
minimizerOptions: {
// 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',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}),
],
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
},
module: {
rules: [
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};