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()

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