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 相关文章推荐
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
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获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python实现二分查找算法
2017/09/21 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python循环输出三角形图案的例子
2019/11/22 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
党支部书记先进事迹
2014/01/17 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python