求问,webpack build后[webpack-cli]报错minimizerOptions有问题如何解决?
webpack版本为最新5.88如图,在加入这段代码后,运行npm run build报错报错问题完整代码
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode:"development",
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
//打包css
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
//打包图片
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// //fonts字体
// {
// test: /\.(woff|woff2|eot|ttf|otf)$/i,
// type: 'asset/resource',
// },
],
},
plugins: [
// Images are converted to `webp` and the original assets have been kept
new ImageMinimizerPlugin({
test: /\.(png)$/i,
filename: "[path][name].webp",
minify: ImageMinimizerPlugin.squooshMinify,
minimizerOptions: {
targets: {
".png": "webp",
},
},
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
new CssMinimizerPlugin(),
],
},
entry: {
index: './src/index.js',
print: './src/print.js',
},
};
在使用了大佬提供的代码后,成功压缩了图片,但是出现了新的报错问题目前代码
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode:"development",
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
//打包css
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
//打包图片
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// //fonts字体
// {
// test: /\.(woff|woff2|eot|ttf|otf)$/i,
// type: 'asset/resource',
// },
],
},
plugins: [
new CopyPlugin({ patterns: ["images/**/*.png"] }),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
optimization: {
minimize: true,
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
},
generator: [
{
type: "asset",
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: ["imagemin-webp"],
},
},
],
}),
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
new CssMinimizerPlugin(),
],
},
entry: {
index: './src/index.js',
print: './src/print.js',
},
};
回复
1个回答
test
2024-06-29
具体更多的配置信息可以去image-minimizer-webpack-plugin文档:安装 imagemin 插件:
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev
你看看官方的配置吧:
const CopyPlugin = require("copy-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
"...",
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
},
generator: [
{
type: "asset",
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: ["imagemin-webp"],
},
},
],
}),
],
},
plugins: [new CopyPlugin({ patterns: ["images/**/*.png"] })],
};
plugins重复了,看下完整代码:
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: "development",
module: {
rules: [
// 打包css
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
// 打包图片
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new CopyPlugin({ patterns: ["images/**/*.png"] }),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
}),
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i,
}),
new CssMinimizerPlugin(),
],
},
entry: {
index: './src/index.js',
print: './src/print.js',
},
};
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容