前言
這是webpack實戰系列筆記的第7篇記錄——分離樣式，前幾篇記錄如下：
- 打包第一個應用
- 模塊化與模塊打包
- 資源輸入與輸出
- 一切皆模塊
- 預處理器【上篇】
- 預處理器——常用loader【下篇】
在之前篇章裏面主要是對js的打包應用和處理，而打包方面另外一個重要工作就是樣式處理。
在實際工程中，如果項目具有一定規模，那麼CSS的維護成本則會比較高昂，這個時候就需要更友好且更低價的方式來處理樣式問題。本篇介紹webpack結合樣式編輯器、轉換器及相關插件來提升樣式方面的開發效率。
分離樣式
1. 分離樣式文件概念
在之前寫的簡單demo中，處理過關於CSS，並且在預處理器篇介紹過關於CSS的預處理器：style-loader和css-loader。通過JS引入CSS樣式去打包，在編寫階段可以直觀的描述出來模塊之間的依賴關係。
但是問題隨之而來：在打包後，我們對css樣式的添加，是通過標籤<style>來引入的，可生產環境下，一般我們希望樣式存在於CSS文件中而不是style標籤中，因爲文件更有利於客戶端進行緩存。那麼我們怎麼輸出單獨的CSS文件呢？
2. mini-css-extract-plugin
該插件主要是用於提取樣式到CSS文件的。
特性：
- 可處理多樣式文件
- 支持按需加載
3 安裝
兩種方式 選擇一種即可
yarn add mini-css-extract-plugin
// 或
npm install mini-css-extract-plugin
4. 舉例
舉個例子：
a.js引入自身a.css樣式，並引入b.js，而b.js也有自身相應的b.css樣式，那麼最終樣式會被同步加載，通過index.html的link標籤加載進來。
a.js
import './a.css'
import './b.js'
document.write('A.JS<br/>');
a.css
body{
background: deepskyblue;
}
b.js
import './b.css'
document.write('B.JS<br/>');
b.css
body{
background: thistle;
}
webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: {
index: './src/a.js',
},
output: {
filename: '[name].js'
},
mode: 'development',
// loader配置
module: {
rules: [
// css
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader'
]
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
}
打包
yarn build
// 或
npm run build
HTML引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./dist/index.css">
<title>style</title>
</head>
<body>
<script src="./dist/index.js"></script>
</body>
</html>
運行結果
運行引入了腳本和樣式的HTML文件，查看結果：
小結
其實本篇就是單獨拎出來了一個loader預處理器來介紹：mini-css-extract-plugin。目的就是生產環境下，通過link引入樣式存在於CSS文件中而不是style標籤中，這樣更有利於客戶端進行緩存。
下一篇介紹樣式預處理。