When I did build, I got the following error and I don't know how to deal with it.
[webpack-cli] Failed to load
'C:\Users\facto\Desktop\Course-Documentation-Part-1\code\webpack.config.build.js'
config [webpack-cli] Invalid options object.Image Minimizer Plugin
has been initialized using an options object that does not match the
API schema.
- options has unknown property 'minimizerOptions'. These properties are valid: object {test?, include?, exclude?,
minimalizer?, generator?, severityError?, loader?, concurrency?,
deleteOriginalAssets?}
I would appreciate it if you could let me know.
I think the writing style has changed with the version upgrade, but I don't know how to deal with it because I'm a beginner.Thank you for your cooperation.
const path=require('path')
const webpack=require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin') const
CopyWebpackPlugin=require('copy-webpack-plugin')const
ImageMinimizerPlugin=require('image-minimizer-webpack-plugin')const
MiniCssExtractPlugin=require('mini-css-extract-plugin')const
TerserPlugin=require('terser-webpack-plugin')
constIS_DEVELOPMENT=process.env.NODE_ENV==='dev'
const dirApp = path.join(__dirname, 'app') const dirImages =
path.join(__dirname, 'images') const dirShared=path.join(__dirname,
'shared') const dirStyles = path.join(__dirname, 'styles') const
dirVideo=path.join(__dirname, 'video') const dirNode=
'node_modules'
module.exports = {entry: [ path.join(dirApp, 'index.js',]
path.join(dirStyles, 'index.scss')],
resolve: {
modules: [dirApp, dirImages, dirShared, dirStyles, dirVideo, dirNode], },
optimization: {
minimize —true,
minimalizer: new TererPlugin(), },
plugins: [
new webpack.DefinePlugin({
IS_DEVELOPMENT,
}),
new CopyWebpackPlugin({
patterns:
{
from: './shared',
to :',
noErrorOnMissing: true,
},
],
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new ImageMinimizerPlugin({
MinimizerOptions: {
plugins: [
['gifsicle', {interlaced:true}],
['jpegtran', {progressive:true}],
['optipng', {optimizationLevel:8},
],
},
}),
new CleanWebpackPlugin(),],
module: {
rules:[
{
test://\.js$/,
use: {
loader: 'babel-loader',
options: {
presents: [['@babel/preset-env', {target:{esmodules:true}}],
},
},
},
{
test://\.scss$/,
use:
{
loader —MiniCssExtractPlugin.loader,
options: {
publicPath:',
},
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test://\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name(file){
return '[hash].[ext]'
},
},
},
{
test://\.(jpe?g|png|gif|svg|webp)$/i,
use:
{
loader: ImageMinimizerPlugin.loader,
options: {
severityError: 'warning', // Ignore errors on corrupted images
MinimizerOptions: {
plugins: ['gifsicle',
},
},
},
],
},
{
test://\.(glsl|frag|vert)$/,
loader: 'raw-loader',
exclude: /node_modules/,
},
{
test://\.(glsl|frag|vert)$/,
loader: 'glslify-loader',
exclude: /node_modules/,
},
], }, }
As stated in the error message, ImageMinimizerPlugin
has an error.
Reading CHANGELOG in ImageMinimizerPlugin
, the minimizerOptions
disappeared in v3.0.0 released on December 5, 2021.You must write options in the minimizer
so that the error message contains the minimizer
.
ImageMinimizerPlugin
documentation also contains the latest version of how to write: https://webpack.js.org/plugins/image-minimizer-webpack-plugin/
It should be like the following.
minimizer:{
options: {
plugins: [
['gifsicle', {interlaced:true}],
['jpegtran', {progressive:true}],
['optipng', {optimizationLevel:8},
],
},
},
© 2024 OneMinuteCode. All rights reserved.