標籤：doctype rac down nod extra res 檔案的 使用者 檔案
教程所示圖片使用的是 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 [email protected]
其餘配置，與第六課相似。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:
// 覆蓋原來顏色：greenhtml { background-color: green !important;}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！
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; }); }});根據我們在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>終
webpack4 系列教程(七): SCSS提取和懶載入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
