多页webpack项目使用 MiniCssExtractPlugin 提取打包，css文件重复打包的问题

Question

情况如下
目前要做一pc网站，于是先撸个简单的脚手架出来
老衲也是首次接触webpack下的开发，撸这东西踩了很多坑了，现在死在这
（各位施主可能会问，干嘛不直接html+script开撸？因为老衲要装逼下用用前端工程化）

使用 webpack4.6.0 + html-webpack-plugin3.2.0 （注:不是用vue），其它东西若干。。

有2页面，index.html,main.html, 分别加载各自的js,配置如下

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)$/,
                //小于1024的图片都用base64的方式加载
                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"
    })
    ]
}

在index.js和main.js中，都有引用了2个css
base.css当然是基础rest css,
为了省事，目前所有页面中效果css,都统一放在main.css,所以每个页面都要引用（或者正式开发时会分开）

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

build之后，html和js打包正常，css目录下，出现2个css文件 ：index.css，main.css,

当然是MiniCssExtractPlugin从js中抽取出来的

打包后的的index.html中引入了index.css, 一样的 main.html中引入了main.css

打开一看， 2个文件的内容一模一样，都包含了base.css和main.css中的内容

问题很明显，base.css重复打包了，所以老衲期望效果是：
base.css和main.css分别打包生成单独的文件，在2个html中当然就是2个link标签引入这2个css文件

或者如果说和打包后js一样，可以需要的块打包并自动引入
让每个html页面自动引入独立的css文件，同时引入公用bsse.css文件 而不像上面一样base.css都重复打包在里面

百度了一番，无果
老衲先从MiniCssExtractPlugin这个插件的配置入手，无奈,实在找不到有用信息
难道没有人遇到过此问题？ 问题可能比较特殊？
是否可能老衲习惯以前的直接开撸开发方式，所以结构配置上有问题？

Answer 1

谢邀~其实可以直接提取压缩成一个样式文件。

new MiniCssExtractPlugin({
    filename: "css/style.css",
    chunkFilename: "[id].css"
})

base.css重复打包了。是因为你写的entry入口index,main，和引用的样式都是一样的。肯定是两份一样的样式。
你需要的是提取公共css，压缩css``。
purify-css， optimize-css-assets-webpack-plugin等插件。
可参考下以下文章。
上手webpack4并进阶？来看这里~
在webpack+vue中，如何将css相同的部分提取到一个公共的common.css中？

Answer 2

现在已算解决问题，为帮助后人，特此写下方案（只会针对老衲的脚手架结构）
如老衲的结构是这样的
index.js:
import idxcss from './css/base.css'
import maincss from './css/index.css'
main.js:
import idxcss from './css/base.css'
import maincss from './css/index.css'

2个入口文件都重复了2个css

话说看到文章说webpack4无法使用extract-text-webpack-plugin，老衲一开始才使用MiniCssExtractPlugin
但是MiniCssExtractPlugin无法抽取所有js中的css打包到一个css中，控制台会提示重复输出

于是在别的地方又看到说其实webpack4 可以用 extract-text-webpack-plugin
安装的时候加个@next
如 cnpm i extract-text-webpack-plugin@next --save-dev

具体使用方法自己百度，楼上施主贴出的地址里面也有
这个插件可以打包所有css到一个文件中，并且不会重复打包

Answer 3

配置有问题。