Webpack 5 not creating css file

Question

Using the configuration below and whilst it produces the js files it doesn't create the css files. Can someone shed some light on where I've got things wrong.

I'm using Node 15.8.0, Webpack 5.27.1 and Bootstrap 4.6.0. I've included the package.json and webpack.config.js for completeness.

package.json

{
  "name": "website",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode development --progress",
    "watch": "webpack --watch",
    "production": "webpack --progress --mode production"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "css-loader": "^5.1.3",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.9",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^8.2.8",
    "postcss-loader": "^5.2.0",
    "precss": "^4.0.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.27.1",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "bootstrap": "4.6.0",
    "popper.js": "^1.16.1"
  }
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: [
        './src/index.js',
        './src/theme.scss',
    ],
    output: {
        filename: '[name]-bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devtool: 'source-map',
    externals: {
        jquery: 'jQuery'
    },
    resolve: {
        extensions: ['.js','.css','.scss']
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false,
        }),
        new BrowserSyncPlugin({
            files: '**/*.php',
            proxy: 'http://www.blackheathcars.london'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.(s?css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'file-loader',
                    'css-loader',
                    { loader: 'postcss-loader', // Run postcss actions
                        options: {
                            postcssOptions: {
                                plugins: function () { // postcss plugins, can be exported to postcss.config.js
                                    return [
                                        require('precss'),
                                        require('autoprefixer')
                                    ];
                                }
                            }
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    },
    optimization: {
        minimizer: [new UglifyJSPlugin(), new OptimizeCssAssetsPlugin()]
    }
};

Answer 1

The npm page for optimize-css-assets-webpack-plugin says it is incompatible with Webpack 5. They suggest using css-minimizer-webpack-plugin instead.

Answer 2

Hi I had the same problem then I realized that I had a missing dependency "babel-polyfill". It could be the problem.