記關於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