Webpack進階第五節
一切皆模組
Webpack有一個不可說的優點,它把所有的檔案都當做模組處理,JavaScript程式碼,CSS和fonts以及圖片等等通過合適的loders都可以被處理。
CSS
webpack提供兩個工具樣式表,css-loader和style-loader,二者處理的任務不同,css-loader使你能夠使用類似@import和url(……)的方法實現require()的功能。style-loader將所有計算後的樣式加入頁面中,二者組合在一起使你能把樣式表嵌入webpack打包後的JS檔案中。
繼續上邊的例子安裝:
npm install --save dev css-loader style-loader
使用:
//使用 module.exports = { ... module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] } };
請注意這裡一個檔案引入多個loader的方法
我們這裡的例子中用到的webpack只有單一的入口,其它的模組需要通過import,require,url等與入口檔案建立其聯絡,為了讓webpack能夠找到”main.css“檔案,我們把它匯入到main.js中,如下:
通常情況下css檔案和js檔案會打包到同一個檔案中,並不會打包一個單獨的css檔案,不過通過合適的配置webpack也可以把css打包為單獨的檔案。
CSS module
在過去的一些年裡,JavaScript通過一些新的語言特性,更好的工具以及更好的實踐方法(比如說模組化)發展得非常迅速。模組使得開發者把複雜的程式碼轉化為小的,乾淨的,依賴宣告明確的單元,配合優化工具,依賴管理和載入管理可以自動完成。
不過前端的另外一部分,CSS發展就相對慢一些,大多的樣式表卻依舊巨大且充滿了全域性類名,維護和修改都非常困難。
被稱為CSS modules
的技術意在把JS的模組化思想帶入CSS中來,通過CSS模組,所有的類名,動畫名預設都只作用於當前模組。Webpack對CSS模組化提供了非常好的支援,只需要在CSS loader中進行簡單配置即可,然後就可以直接把CSS的類名傳遞到元件的程式碼中,這樣做有效避免了全域性汙染。具體的程式碼如下:
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定啟用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
}
}
]
}
]
}
};
我們在app資料夾下建立一個Greeter.css
檔案來進行一下測試
/* Greeter.css */
.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
匯入.root
到Greeter.js
import React, {Component} from 'react'; import config from './config.json'; import styles from './Greeter.css';//匯入
class Greeter extends Component{ render() { return ( <div className={styles.root}> //使用cssModule新增類名的方法 {config.greetText} </div> ); } }
export default Greeter
CSS前處理器
Sass和Less之類的前處理器就是對原生css的擴充套件,它們允許你使用類似於variables,nesting,mixins,inheritance等不存在於css中的特性來寫CSS,CSS前處理器可以將這些特殊的語句轉化為瀏覽器可以識別的CSS語句,
你現在可能都已經熟悉了,在webpack裡使用相關loaders進行配置就可以使用了,以下是常用的CSS 處理loaders
:
Less Loader
Sass Loader
Stylus Loader
不過其實也存在一個css的CSS的處理平臺-PostCSS,它可以幫助你的CSS實現更多的功能。
舉例來說如何使用PostCSS,我們使用PostCSS來為CSS程式碼自動新增適應不同瀏覽器的CSS字首。
安裝postcss-loader 和autoprefixer(自動新增字首的外掛)
npm install --save-dev postcss-loader autoprefixer
接下來,在webpack配置檔案中新增postcss-loader,在根目錄新建postcss.config.js,重新使用npm start打包時,你寫的css會自動根據Can i use裡面的資料新增不同的字首。
本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法,它們其實也是兩個單獨的平臺,配合webpack
可以很好的發揮它們的作用。