關於webpack4下css提取打包去重複的那些事

今天是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