2

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

[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? }

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

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

1 件の回答 1

0

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

ImageMinimizerPluginCHANGELOG を読むと、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/

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。