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

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

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中，運行時嵌入