Webpack not minifying .js file when OptimizeCssAssetsPlugin is added (without it it works)

Question

In production mode my webpack minifies the .js (as it should). But I also need to minify my .css, and to do this I must use OptimizeCssAssetsPlugin. When I use it, it minifies my .css but then my .js stays unminified.

My guess is that when I use optimization (next to 'modules, and 'plugins') something is missing for js because without whole 'optimization' block it works. But what is it? And why?

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./demo/index.html",
            filename: "index.html", 
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: "style.css"
        }),
        new WriteFilePlugin() 
    ],
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(), 
        ],
      },
};

Answer 1

Please have a look at the production configuration of MiniCssExtractPlugin documentation :

While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer...

Regards,

const TerserJSPlugin = require('terser-webpack-plugin');

....

optimization: {
    minimizer: [
        // Minify js files:
        // (TerserJS is webpack default minifier but we have to specify it explicitly 
        // as soon as we include more minifiers)
        new TerserJSPlugin({}),
        // Minify css files:
        new OptimizeCSSAssetsPlugin(),
    ],
},

Answer 2

First, install the plugin:

 npm install optimize-css-assets-webpack-plugin --save-dev

Then we need to require it at the top of our webpack.config.js:

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

Optimization.minimizer” setting:

module.exports = {......
optimization: {minimizer: [new TerserJSPlugin({}),new OptimizeCSSAssetsPlugin({})],}

Note : that besides the “OptimizeCSSAssetsPlugin,” there is another one called “TerserJSPlugin,” which is a plugin that already comes with webpack.

You won't need to install it yourself; that's the plugin used by default to minify your JavaScript when you use “production” mode.

However, the thing you need to do is require it at the top of your webpack configuration file:

const TerserJSPlugin = require('terser-webpack-plugin');