Skip to main content
本文から 250 文字削除
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

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

[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/,
  },
],   }, }
[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/,
      },
    ],   }, }
ソース リンク

webpackエラーについて(optionsに不明なプロパティ'minimizerOptions'があります)ImageMinimizerPluginの対処方法を教えてください

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