The globally installed version of webpack is 5.51.1, and the version of webpack cli is 4.9;

I wanted to use extract text webpack plugin, but there was an error. I checked the document

It is found that the new version of webpack is no longer supported, and the mini CSS extract plugin is recommended

npm install -D mini-css-extract-plugin

Then, after loading, package again and still report an error:

// mini-css-extract-plugin Cannot find module ‘webpack/lib/util/identifier’

After consulting the data, I didn’t find the results. Finally, I considered that it may be the reason why the webpack version is too high 🤔, Therefore, with the mentality of trying, the webpack version was reduced to 5.10.0,

Then package successfully:

The configuration of webpack is as follows:

const { resolve } = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/**
 *
 * @tips
 * loaders are called in right-to-left order
 * The minimize property of css-loader was removed in July 2018
 * The role of css-loader is to read the content from the .css file
 * The role of style-loader is to dynamically insert the style tag into the head through DOM manipulation when the page executes JavaScript
 * In addition to using it in the configuration, you can also specify directly in the source code what Loader to use to process the file; eg:require('style-loader!css-loader! /demo.css');
 */

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: resolve(__dirname, "./build"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader,'css-loader'],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:'[name]_[hash].css'
        }),
    ],
};

Main.js is as follows:

import '../styles/main.css'

00:24:00, go to bed 😪