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部分尚未進行研究，處理鏈中暫不涉及)，
作者：大史不說話
鏈接：webpack4.0各個擊破（2）—— CSS篇
來源：博客園
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/239965.html
標籤：Html/Css
上一篇：uni-app開發經驗分享十六：發布android版App的詳細程序
下一篇：jq系結事件