Webpack4系列教程(四) CSS相關配置

寫在前面

在這篇部落格中，我將會你介紹CSS部分的相關配置

基本配置

我們先看一下目錄結構

然後，我們在入口檔案index.js中引入base.less檔案

import './css/base.less';

這樣子是不行的。我們知道，webpack是隻能識別JS的，對於Css及Less的處理，我們需要藉助相應的loader

我們安裝這幾個loader

cnpm i -D less less-loader css-loader style-loader

在rules中進行配置

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' },
                { loader: 'less-loader' }
            ]
        }
    ]
}

loader的執行順序是自右往左的，即less-loader - css-loader - style-loader

1. less-loader：將less檔案轉換成css檔案
2. css-loader: 載入css檔案
3. style-loader：使用<style>將css-loader內部樣式注入到我們的HTML頁面

執行打包命令後我們發現css程式碼已經打包到了生成的js檔案中，開啟頁面後也有了樣式。而css程式碼我們並不想和js打包到一起，那麼有什麼方法實現呢？我們可以用mini-css-extract-plugin外掛將css抽離出來

抽離CSS（mini-css-extract-plugin）

配置plugins

new MiniCssPlugin({
	filename: '[name].[hash:5].bundle.css'
})

配置loader

{
    test: /\.less$/,
    use: [
        { loader: MiniCssPlugin.loader },
        { loader: 'css-loader' },
        { loader: 'less-loader' }
    ]
}

執行打包命令，我們看一下目錄結構

dist目錄下生成了css檔案，並且掛載到了html檔案上
我們開啟生成的css檔案，發現.active並沒有使用到卻也打包了進來，我們可以用purifycss-webpack消除未使用的CSS

消除未使用的CSS （purifycss-webpack）

我們安裝這個外掛

cnpm i -D purifycss-webpack purify-css

因為我們需要同步檢查html模板，所以我們需要引入node的glob物件使用。在webpack.config.js檔案頭部引入glob。

const glob = require('glob');

配置plugins

new PurifyCSSPlugin({
	// Give paths to parse for rules. These should be absolute!
	paths: glob.sync(path.join(__dirname, 'src/*.html')),
})

這裡配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的檔案，查詢哪些css被使用了

我們再次執行打包命令，.active便沒有被打包進來了。
仔細觀察我寫的css，會發現我寫了一個css3的屬性transform: translate(50deg, 50deg);，有些css屬性因為瀏覽器的差異是需要帶字首來進行相容的，需要我們手動辨識和新增這些字首嗎？我們有更方便的做法，我們用autoprefixer postcss給某些css屬性自動帶上字首

CSS加字首

我們進行安裝

cnpm install --save-dev  postcss-loader autoprefixer postcss

在專案根目錄建立 postcss.config.js

在專案根目錄建立 postcss.config.js，並且設定支援哪些瀏覽器，必須設定支援的瀏覽器才會自動新增新增瀏覽器相容

配置loader

{
    test: /\.less$/,
    use: [
        { loader: MiniCssPlugin.loader },
        { loader: 'css-loader' },
        { loader: 'postcss-loader' },
        { loader: 'less-loader' }
    ]
}

執行打包命令後css屬性自動加上了字首

但是打包後的css程式碼並沒有被壓縮，我們用optimize-css-assets-webpack-plugin壓縮css程式碼

壓縮css程式碼（optimize-css-assets-webpack-plugin）

配置plugins

new OptimizeCssAssetsPlugin()

執行打包命令後，完成壓縮