关于webpack4下css提取打包去重复的那些事-优快云博客

本文探讨在使用Webpack4构建多页应用时，如何避免CSS文件的重复打包，特别是在尝试将基础样式分离并统一打包时遇到的问题。通过对比extract-text-webpack-plugin和MiniCssExtractPlugin的使用，最终找到一种有效的方法，确保CSS资源的有效管理和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是2018-11-14 ，这是7月份写的文章

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

环境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