

buildをすると下記のようなエラーが出ており対処方法がわかりません。

[code]

    [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 an unknown property 'minimizerOptions'. These properties are valid:    object { test?, include?, exclude?,
    minimizer?, generator?, severityError?, loader?, concurrency?,
    deleteOriginalAssets? }
    
[/code]

教えて頂けると助かります。  
バージョンアップに伴い書き方が変わったのかと思うのですが初学者ゆえに対処がわかりません。よろしくお願いします。

[code]

    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')
    
    const IS_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
    dirVideos = path.join(__dirname, 'videos') const dirNode =
    'node_modules'
    
    module.exports = {   entry: [path.join(dirApp, 'index.js'),
    path.join(dirStyles, 'index.scss')],
    
      resolve: {
        modules: [dirApp, dirImages, dirShared, dirStyles, dirVideos, dirNode],   },
    
      optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],   },
    
      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: {
                presets: [['@babel/preset-env', { targets: { 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/,
          },
        ],   }, }
    
[/code]


CC BY-SA 4.0
2022-06-18T13:44:24.187
89463
2022-06-19T14:45:24.130
2022-06-19T03:43:20.800
3060
53129
question
node.js webpack
webpackエラーについて（optionsに不明なプロパティ'minimizerOptions'があります）ImageMinimizerPluginの対処方法を教えてください


エラーメッセージに書いてあるように、`ImageMinimizerPlugin` でエラーが出ています。

`ImageMinimizerPlugin` の [CHANGELOG](https://github.com/webpack-contrib/image-
minimizer-webpack-plugin/blob/master/CHANGELOG.md#300-2021-12-05) を読むと、2021 年
12 月 5 日にリリースされた v3.0.0 で `minimizerOptions` が無くなり `minimizer.options`
に変わっています。エラーメッセージで `These properties are valid` の中に `minimizer`
が含まれているように、`minimizer` の中にオプションを書く必要があります。

`ImageMinimizerPlugin` のドキュメントにも最新版での書き方が載っているので、参考にしてみてください:
<https://webpack.js.org/plugins/image-minimizer-webpack-plugin/>

大体以下のような感じになるはずです。

[code]

    minimizer: {
      options: {
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 8 }],
        ],
      },
    },
    
[/code]


CC BY-SA 4.0
2022-06-19T14:45:24.130
89481
2022-06-19T14:45:24.130
19110
89463
answer