教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> (原文)webpack4 系列教程(七): SCSS 提取和懶加載。
個人技術小站: https://godbmw.com
有空就來看看, 我一直都在
本節課講解在
webpack v4
中的 SCSS 提取和懶加載。值得一提的是,v4
和v3
在 Scss 的懶加載上的處理方法有着巨大差別。
1. 準備工作
關於 SCSS 處理的基礎,請參考webpack4 系列教程(六): 處理 SCSS。
本節課主要涉及 SCSS 在懶加載下提取的相關配置和插件使用。
下圖展示了這次的目錄代碼結構:
爲了實現 SCSS 懶加載,我們使用了extract-text-webpack-plugin
插件。
需要注意,在安裝插件的時候,應該安裝針對v4
版本的extract-text-webpack-plugin
。npm 運行如下命令:npm install --save-dev extract-text-webpack-plugin@next
其餘配置,與第六課相似。package.json
配置如下:
{
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.16.0"
}
}
關於我們的 scss 文件下的樣式文件,base.scss
:
// 網站默認背景色:red
$bgColor: red !default;
*,
body {
margin: 0;
padding: 0;
}
html {
background-color: $bgColor;
}
common.scss
:
// 覆蓋原來顏色:green
html {
background-color: green !important;
}
2. 使用ExtractTextPlugin
使用extract-text-webpack-plugin
,需要在webpack.config.js
的plugins
選項和rules
中scss
的相關選項進行配置。
webpack.config.js
:
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
// 注意 1
fallback: {
loader: "style-loader"
},
use: [
{
loader: "css-loader",
options: {
minimize: true
}
},
{
loader: "sass-loader"
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "[name].min.css",
allChunks: false // 注意 2
})
]
};
在配置中,注意 1中的callback
配置項,針對 不提取爲單獨css
文件的scss
樣式 應該使用的 LOADER。即使用style-loader
將 scss 處理成 css 嵌入網頁代碼。
注意 2中的allChunks
必須指明爲false
。否則會包括異步加載的 CSS!
3. SCSS
引用和懶加載
在項目入口文件app.js
中,針對 scss 懶加載,需要引入以下配置代碼:
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";
剩下我們先設置背景色爲紅色,在用戶點擊鼠標後,懶加載common.scss
,使背景色變爲綠色。剩餘代碼如下:
import "./scss/base.scss";
var loaded = false;
window.addEventListener("click", function() {
if (!loaded) {
import(/* webpackChunkName: 'style'*/ "./scss/common.scss").then(_ => {
// chunk-name : style
console.log("Change bg-color of html");
loaded = true;
});
}
});
4. 打包和引入
根據我們在app.js
中的webpackChunkName
的配置,可以猜測,打包結果中有:style.chunk.js
文件。
命令行執行webpack
打包後,/dist/
目錄中的打包結果如下:
最後,我們需要在 html 代碼中引入打包結果中的、非懶加載的樣式(/dist/app.min.css
)和 js 文件(/dist/app.bundle.js
)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./dist/app.min.css">
</head>
<body>
<script src="./dist/app.bundle.js"></script>
</body>
</html>
終