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