Reputation: 21

Webpack 5 not creating css file

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()]
    }
};

Upvotes: 1