the situation is as follows
currently I want to do a pc website, so I first roll out a simple scaffolding.
is also my first contact with a developer under webpack. I have stepped on a lot of holes to do this, and now I have died here
. (donors may ask, why not just start html+script? Because the old man wants to pretend to use the front-end engineering)

use webpack4.6.0 + html-webpack-plugin3.2.0 (Note: not vue), something else.

there are 2 pages, and index.html,main.html, loads their respective js respectively. The configuration is as follows

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//
module.exports = {
    entry : {
        "index" : __dirname + "/src/index.js",
        "main" : __dirname + "/src/main.js",
        "jqueryv183min" :__dirname + "/src/jqueryv183min.js"
    },
    output:{
        path: __dirname + "/dist",
        filename:"js/[name].js",
        publicPath:"/",
    },
    devServer:{...},
    module:{
        rules:[
            {
                test: /.js$/,
                loader: "babel-loader?presets=es2015",
            },
            {
                test: /\.(htm|html)$/i,
                loader: "html-withimg-loader"
            },
            {
                test:/\.(jpg|png|gif|svg)$/,
                //1024base64
                loader: "url-loader",
                options: {
                    limit: 1024,
                      outputPath:"images/"
                }
            },
            {
                test: /\.css$/,
                loader:[MiniCssExtractPlugin.loader,"css-loader"]
            }
        ]
    },
    plugins:[
    new HtmlWebpackPlugin({
        template: __dirname + "/src/index.html",
        filename:"index.html",
        chunks:["jqueryv183min","index"],
        chunksSortMode: "manual"
    }),
    new HtmlWebpackPlugin({
        template: __dirname + "/src/main.html",
        filename:"main.html",
        chunks:["main"],
        chunksSortMode: "manual"
    }),
    new MiniCssExtractPlugin({
        filename: "css/[name].css",
        chunkFilename: "[id].css"
    })
    ]
}

in both index.js and main.js, there are two references to css
base.css is of course the basic rest css,
in order to save trouble, the effect css, in all pages is placed in main.css, so each page should be referenced (or will be separated during formal development)

import idxcss from "./css/base.css"
import maincss from "./css/main.css"

after build, html and js are packaged normally. In the css directory, two css files appear: index.css,main.css,

is, of course, the

the packaged index.html introduces the same main.html as index.css, and main.css

Open it and see that the contents of the two files are exactly the same, both containing the contents of base.css and main.css

the problem is obvious. Base.css has been repeatedly packaged, so the expected effect of the old man is:
base.css and main.css are packaged to generate separate files. Of course, two link tags in the two html introduce these two css files

or if it is the same as the packaged js, the required blocks can be packaged and automatically introduced
so that each html page automatically introduces a separate css file, while introducing a common bsse.css file instead of repeatedly packing base.css in it as above

Baidu for some time, fruitless
the old man first starts with the configuration of the plug-in MiniCssExtractPlugin, but really can"t find useful information
No one has ever encountered this problem? The problem may be special?
is it possible that the old man is used to the previous direct development method, so there is a problem with the structural configuration?