webpack4 系列教程(七): SCSS提取和懒加载

崔晓明发布于2019-08-23 11:39 / 2623人阅读

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文系列教程七提取和懒加载。个人技术小站有空就来看看我一直都在本节课讲解在中的提取和懒加载。值得一提的是，和在的懒加载上的处理方法有着巨大差别。

教程所示图片使用的是 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)。




  
  
  
  Document

终

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97282.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0
webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

摘要：本节课讲解打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过配置来实现的，而是通过的写法和内置函数实现的。个人网站原文链接系列教程四单页面解决方案代码分割和懒加载本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过...

jackwang 2019-08-26 12:14 评论0 收藏0
webpack4 系列教程(六): 处理SCSS

摘要：只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码教程所示图片使用的是...

马龙驹 2019-08-23 11:33 评论0 收藏0
webpack4系列教程（七）：使用 babel-loader

摘要：然而，浏览器对这些高级语法的支持性并不是非常好。是一个编译器，能够让我们放心的使用新一代语法。在中使用安装修改，加入新的遇到文件就先用处理，表示排除文件夹中的文件。 1. 什么是Babel 如今 ES6 语法在开发中已经非常普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babe...

mingde 2019-08-23 14:43 评论0 收藏0