注意使用vue-cli3（webpack4），默认小于30k不会抽取为公共文件，包括css和js，已测试

经过2天的填坑，现在终于有点成果

环境webpack4.6 + html-webpack-plugins 多页项目

刚开始看文章说webpack4以上无法使用  extract-text-webpack-plugin，用 mini-css-extract-plugin 代替

所以一开始提取css 是用的是mini-css-extract-plugin ：

2个页面，2个入口js文件中，分别

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/main.css'

插件配置：

        new MiniCssExtractPlugin({

            filename: "static/[name].css",

            chunkFilename: "[id].css"

        }),

这样会生成每个对口对应的css文件， 而且都包含base.css的内容，显然重复打包了

想把base.css分离出来，并让html-webpack-plugin自动注入,

并且MiniCssExtractPlugin 的filename改为一个文件名的时候（打包在同一个css文件内），会报错：Conflict: Multiple assets emit to the same filename static/common.css

折腾了2天没有结果

转机

const ExtractTextPlugin = require('extract-text-webpack-plugin')

 //rules:

 test: /\.css$/,

 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" })

//plugins

new ExtractTextPlugin('static/style.css') //可以打包在一个文件内

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

import maincss from './css/index.css'