华山资源网

webpack4 SCSS提取和懒加载的示例
网络编程 2024/11/20 佚名
3 1

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。

> 本节课源码

> 所有课程源码

1. 准备工作

关于 SCSS 处理的基础，请参考webpack4 处理 SCSS。

本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

下图展示了这次的目录代码结构：

webpack4 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/目录中的打包结果如下：

webpack4 SCSS提取和懒加载的示例

最后，我们需要在 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" rel="external nofollow" >
</head>
<body>
 <script src="/UploadFiles/2021-04-02/app.bundle.js">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com