|
本本節(jié)課講解在webpack v4中的 Scss 提取和懶加載,。值得一提的是，v4和v3在 Scss 的懶加載上的處理方法有著巨大差別,。Scss 是 Sass 3 引入新的語(yǔ)法,，其語(yǔ)法完全兼容 css3，并且繼承了 Sass 的強(qiáng)大功能,。也就是說(shuō),，任何標(biāo)準(zhǔn)的 css3 樣式表都是具有相同語(yǔ)義的有效的 Scss 文件。另外,，Scss 還能識(shí)別大部分 css hacks（一些 css 小技巧）和特定于瀏覽器的語(yǔ)法,，例如：古老的 IE filter 語(yǔ)法。 1. 準(zhǔn)備工作關(guān)于 Scss 處理的基礎(chǔ),，請(qǐng)參考webpack4 系列教程(六): 處理 SCSS,。 本節(jié)課主要涉及 SCSS 在懶加載下提取的相關(guān)配置和插件使用。 下圖展示了這次的目錄代碼結(jié)構(gòu)： 
為了實(shí)現(xiàn) SCSS 懶加載,，我們使用了extract-text-webpack-plugin插件,。 需要注意，在安裝插件的時(shí)候,，應(yīng)該安裝針對(duì)v4版本的extract-text-webpack-plugin,。npm 運(yùn)行如下命令：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"
}}
關(guān)于我們的 scss 文件下的樣式文件,，base.scss: // 網(wǎng)站默認(rèn)背景色：red
$bgColor: red !default;
*,
body {
margin: 0;
padding: 0;
}
html {
}
common.scss: // 覆蓋原來(lái)顏色：green
html {
}
pixabayhttps://www./sites/73237.html wallhavenhttps://www./sites/73236.html 2. 使用ExtractTextPlugin使用extract-text-webpack-plugin，需要在webpack.config.js的plugins選項(xiàng)和rules中scss的相關(guān)選項(xiàng)進(jìn)行配置,。 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配置項(xiàng)，針對(duì) 不提取為單獨(dú)css文件的scss樣式 應(yīng)該使用的 LOADER,。即使用style-loader將 scss 處理成 css 嵌入網(wǎng)頁(yè)代碼,。 注意 2中的allChunks必須指明為false。否則會(huì)包括異步加載的 CSS,！ 3. SCSS引用和懶加載在項(xiàng)目入口文件app.js中,，針對(duì) scss 懶加載，需要引入以下配置代碼： import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";
剩下我們先設(shè)置背景色為紅色,，在用戶(hù)點(diǎn)擊鼠標(biāo)后,，懶加載common.scss,，使背景色變?yōu)榫G色。剩余代碼如下： 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. 打包和引入根據(jù)我們?cè)赼pp.js中的webpackChunkName的配置,，可以猜測(cè),，打包結(jié)果中有：style.chunk.js 文件。 命令行執(zhí)行webpack打包后,，/dist/目錄中的打包結(jié)果如下： 
最后,，我們需要在 html 代碼中引入打包結(jié)果中的、非懶加載的樣式(/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>
|
