webpack4.0各個擊破（2）—— CSS篇

webpack作為前端最火的構建工具，是前端自動化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學習記錄，比較基礎，希望通過問題 + 解決方式的模式，以前端構建中遇到的具體需求為出發點，學習webpack工具中相應的處理辦法。（本篇中的參數配置及使用方式均基於webpack4.0版本）

一. CSS檔案基本處理需求

假設項目中的CSS檔案均採用先行編譯語言編寫，那麼在打包中需要處理的基本問題包括：

• 先行編譯語言轉換
• 樣式檔案掛載方式選擇
• 代碼最佳化（合并及壓縮）
• 去除或保留指定格式的注釋
• 資源定位路徑的轉換
• 響應式布局單位轉換【可選】
• 模組化【可選】
• 處理瀏覽器安全色【可選】

二. 解決方案的升級

• 舊的解決方案：先行編譯語言 + 命名方法論

  在不使用構建工具的時代，開發人員使用先行編譯語言來實現變數定義，選取器嵌套等一些剛需，再使用函數功能來實現一些更為複雜的需求，例如編寫簡單的@mixin px2rem( )函數來將開發中使用的px單位轉換為rem單位，達到移動端自適應的目的，或是編寫一些處理相容性的函數來處理瀏覽器安全色性。

  命名的方法論非常多，最為流行的當屬BEM，也就是採用**block__Element-Modifier**這樣的命名方式來進行模組劃分，還有提倡片段化樣式的Aotm-CSS及物件導向的OOCSS等，都是一種命名方法論，也意味著沒有硬性的檢測和預防措施。

• 新的解決方案：先行編譯語言 + 構建工具 + BEM + ACSS全域樣式+CSSModule組件樣式+ POSTCSS

  先行編譯語言的使用基本不變，但現代化開發中已經不再需要通過預定義函數來解決單位轉換或是相容性的問題。首先，構建工具可以通過自動化檢測將先行編譯語言轉換為CSS，基於現代化構建工具的CSS-Module功能，可以通過特定的文法解決CSS模組化的問題，而基於POSTCSS實現的autoprefixer外掛程式，可以依據CanIUse網站提供的瀏覽器支援度資料實現代碼的跨瀏覽器首碼自動補齊。

  新的方案涉及到很多新的概念，但這並不是簡單的炫技，每一個概念都有優點和適用的場合，你需要在恰當的場合使用恰當的技術，最愚蠢的做法就是因為某種技術熱門而盲目地要求開發人員在整個項目中使用。

三. 基本使用方法3.1 常用外掛程式及功能簡述

以webpack4.0版本為例來示範CSS模組的處理方式，需要用到的外掛程式及功能如下：

• style-loader——將處理結束的CSS代碼儲存在js中，運行時嵌入<style>後掛載至html頁面上
• css-loader——載入器，使webpack可以識別css模組
• postcss-loader——載入器，下一篇將詳細描述
• sass-loader——載入器，使webpack可以識別scss/sass檔案，預設使用node-sass進行編譯
• mini-css-extract-plugin——外掛程式，4.0版本啟用的外掛程式，替代原extract-text-webpack-plugin外掛程式，將處理後的CSS代碼提取為獨立的CSS檔案
• optimize-css-assets-webpack-plugin——外掛程式，實現CSS代碼壓縮
• autoprefixer——自動化添加跨瀏覽器安全色首碼

3.2 webpack的配置

本篇不是webpack教程，在此直接給出帶有注釋的webpack.config.js的配置以供參考，樣本中使用SCSS作為先行編譯語言，其他預先處理語言配置方式基本一致：

const HtmlWebpackPlugin = require('html-webpack-plugin');//用於自動產生html入口檔案的外掛程式const MiniCssExtractPlugin = require("mini-css-extract-plugin");//將CSS代碼提取為獨立檔案的外掛程式const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模組資源最佳化外掛程式module.exports = {  mode:'development',  entry:'./main.js',  output:{    filename:'main.bundle.js',    path:__dirname + '/build'  },  module: {    rules: [      {        test: /\.scss$/,        exclude: /node_modules/, //排除node_modules檔案夾        use: [{             loader: MiniCssExtractPlugin.loader//建議生產環境採用此方式解耦CSS檔案與js檔案          },{            loader: 'css-loader',//CSS載入器            options: {importLoaders: 2}//指定css-loader處理前最多可以經過的loader個數               },{            loader: 'postcss-loader',//承載autoprefixer功能          },{            loader: 'sass-loader'//SCSS載入器，webpack預設使用node-sass進行編譯          }        ]      }    ]  },  plugins:[      new HtmlWebpackPlugin(),//產生入口html檔案      new MiniCssExtractPlugin({        filename: "[name].css"      })//為抽取出的獨立的CSS檔案設定配置參數  ],  optimization:{    //對產生的CSS檔案進行代碼壓縮 mode='production'時生效    minimizer:[       new OptimizeCssAssetsPlugin()    ]  }}

postcss.config.js的配置較為簡單：

module.exports = {    plugins:[        require('autoprefixer')    ]}

package.json中增加新的參數指定打包需要支援的瀏覽器類別：

  "browerslist": [    "last 2 versions",    "IE 8",    "UCAndroid"  ]

編寫一段待SCSS代碼:

//變數定義$grey: #1e1e1d;$yellow: #ffad15;$offwhite: #f8f8f8;$darkerwhite: darken($offwhite, 15);//SCSS函數$baseFontSize:14px;//迴圈@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}//mixin@mixin px2rem($name, $px){  #{$name}: $px / $baseFontSize * 1rem;}//嵌套.class3{    font-weight: bold;    display:flex;    &-small{        color: $offwhite;        @include px2rem('font-size',14px);    }}//autoprefixer::placeholder{    width:10px;}

可以看到轉換後的結果:

提示：代碼壓縮等最佳化功能在4.0版本中預設當mode : 'production'時有效。

四. 使用CSS-Modules

項目地址：CSS Modules開源地址

CSS Module在CSS中使用類別選取器，其基本原理是將CSS代碼中的樣式名替換為雜湊值，並建立一個json對照表，在js檔案中對於屬性名稱選取器的使用均被替換為雜湊字串，以此來解決CSS模組化的問題。

在webpack中使用CSS Modules功能非常簡單，只需要在css-loader的配置參數中設定:{modules:true}即可啟用模組化功能。

開啟模組化功能後再進行打包，可以看到同樣的main.css檔案變成了如下樣子：

而在打包檔案中增加了如下片段：

當然CSS Modules的用法遠不止如此，更多的資訊可以參見上面的項目地址。

五. 圖解Css-Process-Chain

從上述配置中可以看出，使用先行編譯器編寫的樣式檔案需要經過一系列loader和plugin才能得到最終的目標檔案，它之所以很抽象是因為中間的處理環節對開發人員來說是黑箱操作，只看得到輸入和輸出，筆者結合自己理解繪製了下面的，希望能夠協助你理解css檔案在整個webpack打包流程中是如何被處理的(plugins部分尚未進行研究，處理鏈中暫不涉及)。