webpack4 SCSS提取和懒加载的示例

网络编程 2025/11/30 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.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)。

<!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">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

webpack4,SCSS,提取,webpack4,SCSS,懒加载

标签：

webpack4,SCSS,提取,webpack4,SCSS,懒加载

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“webpack4 SCSS提取和懒加载的示例”

暂无webpack4 SCSS提取和懒加载的示例的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年11月30日

webpack4 SCSS提取和懒加载的示例

webpack4,SCSS,提取,webpack4,SCSS,懒加载

解决vue单页路由跳转后scrollTop的问题

vue自定v-model实现表单数据双向绑定问题

评论“webpack4 SCSS提取和懒加载的示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接