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 相关文章推荐
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Javascript如何实现扩充基本类型
Aug 26 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一个找二层目录的小东东
2012/08/02 PHP
php计算税后工资的方法
2015/07/28 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python 字典套字典或列表的示例
2019/12/16 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python有几个版本
2020/06/17 Python
计算机应用职专应届生求职信
2013/11/12 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
《假如》教学反思
2016/02/17 职场文书
初中地理教学反思
2016/02/19 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python