Configure MiniCssExtractPlugin

I have an application that has to work on IE9 because several customers are still using it. This weekend, I thought I'll set up webpack so that I can use some of the ES6 features. I created a sample project just to get my feet wet before I started making changes to the project. I ran into a few issues during setup. I read the document and modified the webpack.config.js file, but I am not able to get things to work.

Here is my webpack.config.js file:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const publicPath = '/';

module.exports = {
    mode: 'development',
    'entry': './wwwroot/source/app.js',
    'output': {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js',
        publicPath: publicPath
    },
    //optimization: {
    //    minimizer: [new UglifyJsPlugin()]
    //},
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                exclude: /(node_modules|bower_components)/,
                include: "/wwwroot/css/",
                sideEffects: true,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader' }
                ]
            },
            {
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                     cacheDirectory: true,
                    presets: ['@babel/preset-env']
                }
            }
        }
        ]
    }
};

This is my app.js file where I imported my js and css file

//import $ from 'jquery';
import ES6Lib from './es6codelib';
//import 'bootstrap/dist/css/bootstrap.min.css'; //I could not get bootstrap.min.css to work, I had to move it into the css folder. Then, it starts working correctly.
import '../css/bootstrap.min.css';
import '../css/site.css';

require('./lib');
document.getElementById("fillthis").innerHTML = getText();
$('#fillthiswithjquery').html('Filled by Jquery!');
let myES6Object = new ES6Lib();
$('#fillthiswithes6lib').html(myES6Object.getData());

This is a screenshot of my solution explorer

This is my package.json file

{
  "name": "examplewetpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wbp": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.0.4",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.5.2",
    "jquery": "^3.5.0",
    "mini-css-extract-plugin": "^0.9.0",
    "popper.js": "^1.16.1",
    "serialize-javascript": "^3.0.0",
    "style-loader": "^1.1.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "npm": "^6.14.4"
  }
}

Log file error message:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'c:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Kestner\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'wbp'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.13.0
4 verbose run-script [ 'prewbp', 'wbp', 'postwbp' ]
5 info lifecycle examplewetpack@1.0.0~prewbp: examplewetpack@1.0.0
6 info lifecycle examplewetpack@1.0.0~wbp: examplewetpack@1.0.0
7 verbose lifecycle examplewetpack@1.0.0~wbp: unsafe-perm in lifecycle true
8 verbose lifecycle examplewetpack@1.0.0~wbp: PATH: C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;c:\Users\Kestner\source\repos\examplewetpack\examplewetpack\node_modules\.bin;c:\Users\Kestner\bin;.;C:\Program Files (x86)\Git\local\bin;C:\Program Files (x86)\Git\mingw\bin;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\bin;c:\Python27\;c:\Python27\Scripts;c:\Program Files (x86)\Common Files\Oracle\Java\javapath;c:\ProgramData\Oracle\Java\javapath;c:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;c:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;c:\Windows\system32;c:\Windows;c:\Windows\System32\Wbem;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;c:\Program Files\Java\jdk1.8.0\bin;c:\Program Files (x86)\GtkSharp\2.12\bin;c:\Program Files\Microsoft\Web Platform Installer\;c:\Program Files\Microsoft SQL Server\110\DTS\Binn\;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;c:\Program Files\Microsoft SQL Server\110\Tools\Binn\;c:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;c:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Git\cmd;c:\Dwimperl\perl\bin;c:\Dwimperl\perl\site\bin;c:\Dwimperl\c\bin;c:\Program Files\Microsoft SQL Server\120\Tools\Binn\;c:\Program Files\Microsoft SQL Server\130\Tools\Binn\;c:\Program Files\Git\cmd;c:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\dotnet\;c:\Program Files\Microsoft OLE DB Provider for DB2\system;c:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;c:\Program Files\nodejs\;c:\ProgramData\chocolatey\bin;c:\Program Files (x86)\Brackets\command;c:\Users\Kestner\.dotnet\tools;c:\Users\Kestner\AppData\Local\Programs\Fiddler;c:\Users\Kestner\AppData\Roaming\npm;c:\Users\Kestner\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle examplewetpack@1.0.0~wbp: CWD: c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
10 silly lifecycle examplewetpack@1.0.0~wbp: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle examplewetpack@1.0.0~wbp: Returned: code: 2  signal: null
12 info lifecycle examplewetpack@1.0.0~wbp: Failed to exec wbp script
13 verbose stack Error: examplewetpack@1.0.0 wbp: `webpack`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:210:5)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Kestner\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:210:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid examplewetpack@1.0.0
15 verbose cwd c:\Users\Kestner\source\repos\examplewetpack\examplewetpack
16 verbose Windows_NT 6.1.7601
17 verbose argv "c:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Kestner\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "wbp"
18 verbose node v12.13.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error examplewetpack@1.0.0 wbp: `webpack`
22 error Exit status 2
23 error Failed at the examplewetpack@1.0.0 wbp script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Here is another screenshot as part of the error message:

I was able to figure it out. I am not sure that I completely understand what's going on. I'll have to continue playing with it in order to fully grasp what's going on. Here is what my webpack.config.js file look like now.

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    'entry': './wwwroot/source/app.js',
    'output': {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js'
    },

I had to remove the comment and made changes to optimization as shown below

optimization: {
    splitChunks: {
        cacheGroups: {
            styles: {
                name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                enforce: true
            }
        }
    }
}

end of the first change I had to make

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].css'
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
              exclude: /(node_modules|bower_components)/,

I removed include and sideEffects: true although the sideEffects was not an issue. When include was added, it threw an error and the entire bootstra.min.css displayed on the screen in red. Small modification was made use as shown below. After making I made these changes, it created the files as expected.

              use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                     cacheDirectory: true,
                    presets: ['@babel/preset-env']
                }
            }
        }
        ]
    }
};