About webpack errors (unknown property 'minimizerOptions' in options) How do I troubleshoot ImageMinimizerPlugin?

Asked 2 years ago, Updated 2 years ago, 121 views

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/,
      },
    ],   }, }

node.js webpack

2022-09-30 15:36

1 Answers

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},
    ],
  },
},


2022-09-30 15:36

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.