记关于webpack4下css提取打包去重复的那些事

注意使用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天没有结果

转机


看到说webpack4还是可以用extract-text-webpack-plugin   只不过安装的时候插件名加个@next
于是就改用extract-text-webpack-plugin来提取
这个插件就可以打包在一个css文件内
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') //可以打包在一个文件内

用此插件,可以提取到同一个文件内,并不会重复打包

有一点,js中引入的css要改一下,除了base,其它的全放同一个文件

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

之前2个js文件中除了base.css,还各自引入一个css,会造成index.css内容没有被打包

 另:用optimize-css-assets-webpack-plugin可以压缩打包后的css
上一篇:vsphere web client 使用中文的解决办法


下一篇:android之location 根据接口获取经纬度信息