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

時間 2019-11-24

標籤 webpack4 webpack 系列教程 scss 提取加載简体版

原文原文鏈接

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。javascript

我的技術小站: https://godbmw.com 有空就來看看, 我一直都在css

本節課講解在webpack v4中的 SCSS 提取和懶加載。值得一提的是，v4和v3在 Scss 的懶加載上的處理方法有着巨大差異。html

>>> 本節課源碼java

>>> 全部課程源碼node

1. 準備工做

關於 SCSS 處理的基礎，請參考webpack4 系列教程(六): 處理 SCSS。webpack

本節課主要涉及 SCSS 在懶加載下提取的相關配置和插件使用。git

下圖展現了此次的目錄代碼結構：github

爲了實現 SCSS 懶加載，咱們使用了extract-text-webpack-plugin插件。web

須要注意，在安裝插件的時候，應該安裝針對v4版本的extract-text-webpack-plugin。npm 運行以下命令：npm install --save-dev extract-text-webpack-plugin@nextnpm

其他配置，與第六課類似。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>

終