【摘要】 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的用法遠不止如此，更多的資訊可以參見上面的項目位址。