webpack4 系列教程(七): SCSS提取和懶載入

最後更新：2018-09-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：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;}

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>

終

webpack4 系列教程(七): SCSS提取和懶載入

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More