webpack 3 零基础入门教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
模块热替换
是什么意思?
以前我们使用的 webpack --watch
或 webpack-dev-server
的功能是监听文件改变,就自动刷新浏览器,而这个 模块热替换
不用刷新浏览器,它是只让修改到的模块,才会在浏览器上发生相应的变化,就是生效,而不是重新刷新浏览器。
为什么要这么做呢?有时候模块越多,改得频繁,刷新起来还是很慢的,效率低呀。
所以有了 模块热替换
的功能,我们来试一下,让我们一改 CSS 然后浏览器不用刷新就会让页面生效改变。
1. 启用 HMR
webpack.config.js
devServer: {port: 9000,open: true,}
复制代码
改成下面这样:
devServer: {port: 9000,open: true,hot: true}
复制代码
webpack.config.js
...
const webpack = require('webpack');...module.exports = {entry: {"app.bundle": './src/app.js',"contact": './src/contact.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},devServer: {port: 9000,open: true,hot: true},plugins: [new CleanWebpackPlugin(pathsToClean),...// 这两行是新增的new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()],...
};复制代码
可惜,报错了个错:
文件名还不能用 chunkhash
了,它说要用 hash
来代替 chunkhash
。
我们来改一下:
filename: '[name].[chunkhash].js'
复制代码
变成
filename: '[name].[hash].js'
复制代码
2. 处理 extract-text-webpack-plugin
现在你试一下改变 src/app.scss
的内容,你会发现页面不动了,你无论怎么改,页面都不会改变,也不会刷新。
之前我们是用 extract-text-webpack-plugin
这个插件来处理 CSS 的,在用 HMR 的时候要先把它关闭一下。
用一个参数 disable: true
就可以关闭掉。
webpack.config.js
new ExtractTextPlugin("style.css")
复制代码
变成
new ExtractTextPlugin({filename: 'style.css',disable: true
}),
复制代码
然后把处理 scss
文件的 loader
部分变成类似下面这样:
...test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',//resolve-url-loader may be chained before sass-loader if necessaryuse: ['css-loader', 'sass-loader']})
...
复制代码
变成
...test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']
...
复制代码
再试试,能够生效。
为什么要关闭呢这个插件呢?
其实想想也能知道,在开发环境下,用不用 extract-text-webpack-plugin
这个插件,意义不大,你把 css 变不变成一个文件,关系不大,开发环境只要能调效,效果能够看到就可以,但是生产环境需要这个插件,我们总不能开发环境不使用这个插件,也导致生产环境也不使用吧?
那如何解决这个问题呢?也就是说让生产环境使用这个插件,而开发环境不使用,我们下节来讨论这个问题。
先这么多吧。
webpack 3 零基础入门教程 #12 - 如何使用模块热替换 HMR 来处理 CSS相关推荐
- webpack 3 零基础入门教程 #13 - 生产环境 vs 开发环境
接着上一节来,我们要解决上一节所遇到的一个问题. 上一节提到,要让生产环境使用 extract-text-webpack-plugin 这个插件,而开发环境不使用,如何做到呢? 其实原理很简单,只要能 ...
- webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js
在命令行中运行 webpack 命令确实可以实现 webpack 的功能,但是我们一般不这么做,我们要用配置文件来处理. 我们把之前学到的知识用 webpack 的配置文件来实现,配置文件的名字叫 w ...
- webpack 3 零基础入门教程 #6 - 使用 loader 处理 CSS 和 Sass
1. 什么是 loader 官方的解释是这样的: loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader ...
- python怎么输出浮点数_python 零基础入门教程第 2 章:基本数据类型 (一)
一.什么是数据类型 编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
- 视频教程-Python零基础入门教程-Python
Python零基础入门教程 从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
- 视频教程-ARDUINO零基础入门教程【代码编程篇】-Arduino
ARDUINO零基础入门教程[代码编程篇] 精通各种单片机编程,有十年以上ARDUINO,51单片机/STM32/PIC/AVR编程,硬件设计,绘图,编程经验.熟悉各种常用传感器使用和物联网通讯 赵勇 ...
- SEO零基础入门教程(外链的发布和软文编写)
seo的作用是众所周知的,对网站进行seo优化,可以给网站带来大量的搜索引擎流量.但是想要做好网站优化也有难度,尤其是对于seo新手来说,因为缺乏理论和实战,所以seo新手需要多加练习.那么具体seo ...
- 九宫怎么排列和使用_剪映零基础入门教程第三十七篇:一学就会系列之九宫格小程序配音...
很多玩儿抖音的朋友都看过九宫格视频,但是并不是每个玩抖音的人都会制作这个九宫格视频,实际这个需要借助小工具来帮忙,而常用抖音的朋友们会对剪映更加熟悉一些,且九宫格视频在剪映内的制作方式则比较简单.那么 ...
- 计算机pscs6教程,photoshop CS6零基础入门教程
<photoshop CS6零基础入门教程>针对零基础学员开设,以教案和实际操作演示相结合的方式,详细地介绍adobe photoshop cs6的各项工具和命令.由浅入深.循序渐进地全面 ...
最新文章
- Oracle 基础教程
- Spark详解(十四):Spark SQL的Join实现
- 3线程的终止方式,线程属性,NPTL
- linux清除网卡记录,linux 清除驱动对网卡的记录
- c++ const static
- controller调用controller的方法_SpringBoot 优雅停止服务的几种方法
- 已安装Anaconda情况下,命令行pip,python报错(详细 已解决)
- 断路器监控(Hystrix Dashboard)
- Powershell中禁止执行脚本解决办法
- kotlin学习二:初步认识kotlin
- dos下\与/有什么区别
- qq空间相册查看器_一刻相册相册怎么样?一刻相册和其他相册对比
- 2019年互联网寒冬,带你走进真实的面试杀出重围
- linux串口链接扫码枪,串口扫描枪怎样使用?
- Opencv读取.dat格式CT数据
- matplotlib4 --设置line的属性, color,linestyle, linewidth, marker等
- 文创礼品受追捧 华丽跨界火出圈
- Clickhouse基本函数( 转载)
- 车企围攻整车OS,这张“新王牌”怎么打?
- Linux下命令补全工具bash-completion
热门文章
- cad多线段长度计算总和_没想到啊,我平时用的CAD多段线有这么多学问
- c++两个数组对比去掉重复的元素_LeetCode 题解 | 167.两数之和 II 输入有序数组...
- 拉普拉斯时域卷积定理_如何证明频域卷积定理
- 两条直线求交点c语言,C§ 3.3.1两条直线的交点坐标(5页)-原创力文档
- 电脑摄像头未能创建连接服务器,Win7中摄像头提示未能创建视频预览错误怎么办...
- 云耀云服务器性能怎么样,华为云测评:2CPU+4G内存+5M带宽的云耀云服务器HECS
- mybatis连接oracle12乱码,使用mybatis链接oracle数据库出现账号密码错误解决
- html用dom显示xml,html DOM文件引用一个XML文件将不会在浏览器中打印
- php 将多个数组 相同的键重组,PHP – 合并两个类似于array_combine但具有重复键的数组...
- mysql dos 下切换连接_如何在dos下连接进入mysql对数据库进行操作