I'm getting an error like the below.
ERROR in ./src/sass/main.scss (./src/sass/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
ERROR in ./src/sass/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const JS_DIR = path.resolve(__dirname, 'src/js')
const IMG_DIR = path.resolve(__dirname, 'src/img')
const BUILD_DIR = path.resolve(__dirname, 'build')
const entry = {
main: JS_DIR + '/main.js'
}
const output = {
path: BUILD_DIR,
filename: 'js/[name].js'
}
const plugins = (argv) => [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: ('production' === argv.mode)
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
}),
new CssMinimizerPlugin(),
]
const rules = [
{
test: /\.js$/,
include: [JS_DIR],
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
},
{
test: /\.(png|jpg|jpeg|svg|gif|ico)$/,
generator: {
filename: '[path][name].[ext]',
},
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
},
},
],
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: [IMG_DIR, /node_modules/],
generator: {
filename: '[path][name].[ext]',
},
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
}
}
]
}
]
module.exports = (env, argv) => ({
entry: entry,
output: output,
devtool: 'source-map',
module: {
rules: rules
},
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
minify: [
CssMinimizerPlugin.cssnanoMinify,
CssMinimizerPlugin.cleanCssMinify
]
}),
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
parallel: true,
}),
]
},
plugins: plugins(argv),
externals: {
jquery: 'jQuery'
}
})