title: Webpack 5 not creating css file
body: <p>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.</p>
  <p>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.</p>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;website&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;webpack --mode development --progress&quot;,
      &quot;watch&quot;: &quot;webpack --watch&quot;,
      &quot;production&quot;: &quot;webpack --progress --mode production&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.13.10&quot;,
      &quot;@babel/core&quot;: &quot;^7.13.10&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.13.10&quot;,
      &quot;autoprefixer&quot;: &quot;^10.2.5&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;browser-sync&quot;: &quot;^2.26.14&quot;,
      &quot;browser-sync-webpack-plugin&quot;: &quot;^2.3.0&quot;,
      &quot;css-loader&quot;: &quot;^5.1.3&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.3.9&quot;,
      &quot;node-sass&quot;: &quot;^5.0.0&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.4&quot;,
      &quot;postcss&quot;: &quot;^8.2.8&quot;,
      &quot;postcss-loader&quot;: &quot;^5.2.0&quot;,
      &quot;precss&quot;: &quot;^4.0.0&quot;,
      &quot;sass-loader&quot;: &quot;^11.0.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;uglifyjs-webpack-plugin&quot;: &quot;^2.2.0&quot;,
      &quot;webpack&quot;: &quot;^5.27.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.5.0&quot;
    },
    &quot;dependencies&quot;: {
      &quot;bootstrap&quot;: &quot;4.6.0&quot;,
      &quot;popper.js&quot;: &quot;^1.16.1&quot;
    }
  }
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>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()]
      }
  };
  </code></pre>