webpack作為前端最火的構(gòu)建工具，是前端自動(dòng)化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過(guò)問(wèn)題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）
假設(shè)項(xiàng)目中的CSS文件均采用預(yù)編譯語(yǔ)言編寫，那么在打包中需要處理的基本問(wèn)題包括：
預(yù)編譯語(yǔ)言轉(zhuǎn)換
樣式文件掛載方式選擇
代碼優(yōu)化（合并及壓縮）
去除或保留指定格式的注釋
資源定位路徑的轉(zhuǎn)換
響應(yīng)式布局單位轉(zhuǎn)換【可選】
模塊化【可選】
處理瀏覽器兼容【可選】
舊的解決方案：預(yù)編譯語(yǔ)言 + 命名方法論
在不使用構(gòu)建工具的時(shí)代，開發(fā)者使用預(yù)編譯語(yǔ)言來(lái)實(shí)現(xiàn)變量定義，選擇器嵌套等一些剛需，再使用函數(shù)功能來(lái)實(shí)現(xiàn)一些更為復(fù)雜的需求，例如編寫簡(jiǎn)單的@mixin px2rem( )函數(shù)來(lái)將開發(fā)中使用的px單位轉(zhuǎn)換為rem單位，達(dá)到移動(dòng)端自適應(yīng)的目的，或是編寫一些處理兼容性的函數(shù)來(lái)處理瀏覽器兼容性。
命名的方法論非常多，最為流行的當(dāng)屬BEM，也就是采用block__Element-Modifier這樣的命名方式來(lái)進(jìn)行模塊劃分，還有提倡碎片化樣式的Aotm-CSS及面向?qū)ο蟮?code>OOCSS等，都是一種命名方法論，也意味著沒(méi)有硬性的檢測(cè)和預(yù)防措施。
新的解決方案：預(yù)編譯語(yǔ)言 + 構(gòu)建工具 + BEM + ACSS全局樣式+CSSModule組件樣式+ POSTCSS
預(yù)編譯語(yǔ)言的使用基本不變，但現(xiàn)代化開發(fā)中已經(jīng)不再需要通過(guò)預(yù)定義函數(shù)來(lái)解決單位轉(zhuǎn)換或是兼容性的問(wèn)題。首先，構(gòu)建工具可以通過(guò)自動(dòng)化檢測(cè)將預(yù)編譯語(yǔ)言轉(zhuǎn)換為CSS，基于現(xiàn)代化構(gòu)建工具的CSS-Module功能，可以通過(guò)特定的語(yǔ)法解決CSS模塊化的問(wèn)題，而基于POSTCSS實(shí)現(xiàn)的autoprefixer插件，可以依據(jù)CanIUse網(wǎng)站提供的瀏覽器支持度數(shù)據(jù)實(shí)現(xiàn)代碼的跨瀏覽器前綴自動(dòng)補(bǔ)齊。
新的方案涉及到很多新的概念，但這并不是簡(jiǎn)單的炫技，每一個(gè)概念都有優(yōu)點(diǎn)和適用的場(chǎng)合，你需要在恰當(dāng)?shù)膱?chǎng)合使用恰當(dāng)?shù)募夹g(shù)，最愚蠢的做法就是因?yàn)槟撤N技術(shù)熱門而盲目地要求開發(fā)人員在整個(gè)項(xiàng)目中使用。
以webpack4.0版本為例來(lái)演示CSS模塊的處理方式，需要用到的插件及功能如下：
style-loader——將處理結(jié)束的CSS代碼存儲(chǔ)在js中，運(yùn)行時(shí)嵌入<style>后掛載至html頁(yè)面上
css-loader——加載器，使webpack可以識(shí)別css模塊
postcss-loader——加載器，下一篇將詳細(xì)描述
sass-loader——加載器，使webpack可以識(shí)別scss/sass文件，默認(rèn)使用node-sass進(jìn)行編譯
mini-css-extract-plugin——插件，4.0版本啟用的插件，替代原extract-text-webpack-plugin插件，將處理后的CSS代碼提取為獨(dú)立的CSS文件
optimize-css-assets-webpack-plugin——插件，實(shí)現(xiàn)CSS代碼壓縮
autoprefixer——自動(dòng)化添加跨瀏覽器兼容前綴
本篇不是webpack教程，在此直接給出帶有注釋的webpack.config.js的配置以供參考，示例中使用SCSS作為預(yù)編譯語(yǔ)言，其他預(yù)處理語(yǔ)言配置方式基本一致：
const HtmlWebpackPlugin = require('html-webpack-plugin');//用于自動(dòng)生成html入口文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//將CSS代碼提取為獨(dú)立文件的插件
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模塊資源優(yōu)化插件
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//建議生產(chǎn)環(huán)境采用此方式解耦CSS文件與js文件
},{
loader: 'css-loader',//CSS加載器
options: {importLoaders: 2}//指定css-loader處理前最多可以經(jīng)過(guò)的loader個(gè)數(shù)
},{
loader: 'postcss-loader',//承載autoprefixer功能
},{
loader: 'sass-loader'//SCSS加載器，webpack默認(rèn)使用node-sass進(jìn)行編譯
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin(),//生成入口html文件
new MiniCssExtractPlugin({
filename: "[name].css"
})//為抽取出的獨(dú)立的CSS文件設(shè)置配置參數(shù)
],
optimization:{
//對(duì)生成的CSS文件進(jìn)行代碼壓縮 mode='production'時(shí)生效
minimizer:[
new OptimizeCssAssetsPlugin()
]
}
}postcss.config.js的配置較為簡(jiǎn)單：
module.exports = {
plugins:[
require('autoprefixer')
]
}package.json中增加新的參數(shù)指定打包需要支持的瀏覽器類別：
"browerslist": [ "last 2 versions", "IE 8", "UCAndroid" ]
編寫一段待SCSS代碼:
//變量定義
$grey: #1e1e1d;
$yellow: #ffad15;
$offwhite: #f8f8f8;
$darkerwhite: darken($offwhite, 15);//SCSS函數(shù)
$baseFontSize:14px;
//循環(huán)
@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;
}可以看到轉(zhuǎn)換后的結(jié)果:
提示：代碼壓縮等優(yōu)化功能在4.0版本中默認(rèn)當(dāng)mode : 'production'時(shí)有效。
項(xiàng)目地址：CSS Modules開源地址
CSS Module在CSS中使用類選擇器，其基本原理是將CSS代碼中的樣式名替換為哈希值，并建立一個(gè)json對(duì)照表，在js文件中對(duì)于屬性名選擇器的使用均被替換為哈希字符串，以此來(lái)解決CSS模塊化的問(wèn)題。
在webpack中使用CSS Modules功能非常簡(jiǎn)單，只需要在css-loader的配置參數(shù)中設(shè)置:{modules:true}即可激活模塊化功能。
開啟模塊化功能后再進(jìn)行打包，可以看到同樣的main.css文件變成了如下樣子：
而在打包文件中增加了如下片段：
當(dāng)然CSS Modules的用法遠(yuǎn)不止如此，更多的信息可以參見(jiàn)上面的項(xiàng)目地址。
從上述配置中可以看出，使用預(yù)編譯器編寫的樣式文件需要經(jīng)過(guò)一系列loader和plugin才能得到最終的目標(biāo)文件，它之所以很抽象是因?yàn)橹虚g的處理環(huán)節(jié)對(duì)開發(fā)者來(lái)說(shuō)是黑箱操作，只看得到輸入和輸出，筆者結(jié)合自己理解繪制了下面的示意圖，希望能夠幫助你理解css文件在整個(gè)webpack打包流程中是如何被處理的(plugins部分尚未進(jìn)行研究，處理鏈中暫不涉及)。
作者：大史不說(shuō)話
鏈接：webpack4.0各個(gè)擊破（2）—— CSS篇
來(lái)源：博客園
聯(lián)系客服
