webpack4 SCSS提取和懒加载的示例


Posted in Javascript onSeptember 03, 2018

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4v3在 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.jsplugins选项和rulesscss的相关选项进行配置。

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="./dist/app.bundle.js"></script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 #Javascript
You might like
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
一端时间轮换的广告
2006/06/26 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
工厂总经理岗位职责
2014/02/07 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
精神文明单位申报材料
2014/05/02 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis