I’m learning how to config webpack.Today I meet some problems.I tried test the result with the configuration of prefetch,so my index.js file was just like this.

//index.js
import hello from './hello';
import imgsrc from './asset/千峰教育.png';
import logoSVG from './asset/千峰教育.svg';
import exampleTxt from './asset/example.txt';
import jpgMap from './asset/Stack Overflow.jpg';
import './style.css';
import './style.less';
import Data from './asset/data.xml';
import Notes from './asset/data.csv';
//import toml from './asset/data.toml';
//import yaml from './asset/data.yaml';
//import json5 from './asset/data.json5';
import _ from 'lodash';
import './async-module.js';

hello();
const img = document.createElement('img');
img.src = imgsrc;
document.body.appendChild(img);

const img2 = document.createElement('img');
img2.style.cssText = 'width:600px;height:200px'
img2.src = logoSVG;
document.body.appendChild(img2);

const block = document.createElement('div');
block.style.cssText = 'width:200px;height:200px;background:aliceblue';
block.classList.add('block-bg');
block.textContent = exampleTxt;
document.body.appendChild(block);

const img3 = document.createElement('img');
img3.style.cssText = 'width:600px;height:240px;display:block;';
img3.src = jpgMap;
document.body.appendChild(img3);

document.body.classList.add('hello');

console.log(Data);
console.log(Notes);
/*
console.log(toml.title);
console.log(toml.owner.name);

console.log(yaml.title);
console.log(yaml.owner.name);

console.log(json5.title);
console.log(json5.owner.name);*/

console.log(_.join(['index', 'module', 'loaded!'], ' '));

const button = document.createElement('button');
button.textContent = '点击执行加法运算';
button.addEventListener('click', () => {
    import(/*webpackChunkName:'math',webpackPrefetch:true*/'./math.js').then(({ add }) => {     //将add方法从math.js模块中解构出来
        console.log(add(4, 5));
    });
});
document.body.appendChild(button);

The code block may be a little too long,but it doesn’t matter.Please focus on the configuration of ‘webpackPrefetch:true’.When I run the project in the development mode,it didn’t throw an error in the console.However,when I open the browser and login the html,the browser shows that installedCssChunks is not defined.

npx webpack
npx webpack-dev-server

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const toml = require('toml');
const yaml = require('yaml');
const json5 = require('json5');

module.exports = {
    entry: {
        /*
        index: {
            import: './src/index.js',
            dependOn: 'shared'
        },

        another: {
            import: './src/another-module.js',
            dependOn: 'shared'
        },

        shared: 'lodash'*/
        index: './src/index.js',
        another: './src/another-module.js'
    },

    output: {
        filename: '[name].bundle.js',
        //path必须是绝对路径
        path: path.resolve(__dirname, './dist'),
        clean: true,    //清理生成目录中没有用到的文件
        assetModuleFilename: 'images/[contenthash][ext]'    //指定打包后的文件夹和名称
    },

    mode: 'development',

    devtool: 'inline-source-map',

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'app.html',
            inject: 'body'
        }),

        new MiniCssExtractPlugin({    //创建插件实例对象
            filename: 'styles/[contenthash].css'     //设置打包后的CSS的文件名称
        })
    ],

    devServer: {
        //该选项允许配置从目录提供静态文件的选项（默认是'public'文件夹）
        static: './dist'
    },

    module: {
        rules: [
            {
                test: /.png$/,
                type: 'asset/resource',
                generator: {    //generator优先级高于assetModuleFilename优先级
                    filename: 'images/[contenthash][ext]'
                }
            },
            {
                test: /.svg$/,
                type: 'asset/inline'
            },
            {
                test: /.txt$/,
                type: 'asset/source'
            },
            {
                test: /.jpg$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024 * 1024
                    }
                }
            },
            {
                test: /.(css|less)/,
                //采用CSS的压缩插件以压缩生成后的CSS文件大小
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)/,    //加载字体类型的资源
                type: 'asset/resource'
            },
            {
                test: /.(csv|tsv)$/,
                use: 'csv-loader'
            },
            {
                test: /.xml$/,
                use: 'xml-loader'
            },
            {
                test: /.toml$/,
                type: 'json',
                parser: {
                    parse: toml.parse
                }
            },
            {
                test: /.yaml$/,
                type: 'json',
                parser: {
                    parse: yaml.parse
                }
            },
            {
                test: /.json5$/,
                type: 'json',
                parser: {
                    parse: json5.parse
                }
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ['@babel/plugin-transform-runtime']
                        ]
                    }
                }
            }
        ]
    },

    optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ],

        splitChunks: {
            chunks: 'all'
        }
    }
}

The content in the development mode

The error in the development mode
I felt so confused that I asked AI.AI answered that the third plugin MiniCssExtractPlugin should be used in the production mode,and the configuration of webpackPrefetch should also in the production mode.Because both of them prefer compressing to debugging.
In this case,I changed the mode to production and didn’t change other things.When I run the project secondly,it became even worse that the console threw two warnings.
The content in the production mode

The error and warnings in the production mode

It appears that the installedCssChunks is not defined in both of these modes.I don’t know which mode should I take and how to solve these problems.Who could help me?