webpack 热更新
本节我们学习 webpack
的模块热更新,也可以叫做模块热替换。其目的是为了加快用户的开发速度,提高编程体验,方便开发人员在不刷新页面的情况下,就能修改代码,并且直观地在页面上看到变化。这个功能主要用于开发过程中,对于生产环境没有任何帮助。
什么是模块热更新
HMR
全称为 Hot Module Replacement
,中文意思为模块热更新,是 webpack
提供的最有用的功能之一。它允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运行中,热替换就是将正在运行的模块进行替换。
热更新主要可以通过以下几种方式来显著加快发速度:
- 保留在完全重新加载页面时丢失的应用程序的状态。
- 只更新改变的内容,以节省开发时间。
- 调整样式更加快速,几乎等同于就在浏览器调试器中更改样式。
启用热更新
HMR
的启动其实很简单,需要使用到 webpack-dev-server
插件和 HMR
插件。
如果要通过 webpack-dev-server
启动 webpack
的开发环境,可以打开 webpack-dev-server
的热更新开关,例如下面是在 webpack.config.js
配置文件中的演示代码:
module.exports = {devServer: {hot: true, // 打开热更新开关}
}
在 webpack.config.js
中加入 HotModuleReplacementPlugin
插件,因为这个插件是 webpack
自带的,如果可以直接加入:
module.exports = {plugins: [webpack.HotModuleReplacementPlugin(),]
}
热更新Less代码编译
在实际应用中,我们一般不会直接编写 CSS 代码,而是使用 CSS 预编译器,例如 Less、Sass、Stylus 来将写好的代码编译成 CSS 代码。我们使用 Less 来举例,在 webpack
中如果我们要使用 Less 代码编译成 CSS 代码,在打包时需要用到一个 less-loader
加载器。而要将 Less 代码正确编译成 CSS 代码则还需要用到 style-loader
和 css-loader
。
首先安装这三个加载器:
npm install style-loader css-loader less-loader --save-dev
然后修改 webpack.config.js
配置文件:
module:{rules:[{test:/.less$/,use:['style-loader','css-loader', 'less-loader']}]},
然后将一个 .less
文件导入到入口文件 index.js
中,例如:
import "./xkd.less"
最后执行 webpack
命令把 xkd.less
文件进行打包,并成功编译成了 CSS 代码。
但是这样我们会发现一个问题,每个修改完 Less 时,如果想在网页中看一下效果,就必须重新执行 webpack
打包一下,那么呀如何解决这个问题呢。这时候就可以用到热更新这个功能。使用热更新,每次修改完代码后,不需要执行 webpack
命令,界面会自动更新。
示例:
webpack.config.js
配置文件的内容如下所示:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: {entry:'./index.js',},output: {path:__dirname + '/dist',filename:'./bundle.js'},module:{rules:[{test:/.less$/,use:['style-loader','css-loader', 'less-loader']}]},mode: 'production',plugins: [new HtmlWebpackPlugin({ //html编译插件template: './index.html'}),],devServer:{//配置服务端口号port:8090,// 打开热更新开关hot: true, //设置基本目录结构contentBase:path.resolve(__dirname,'dist'),//服务器的IP地址,可以使用IP也可以使用localhosthost:'localhost',//服务端压缩是否开启compress:true,}
}
在 package.json
中配置 npm
脚本命令:
"scripts": {"build": "webpack --config webpack.config.js","dev": "webpack-dev-server --mode development"
}
然后执行 npm run build
会将代码打包,打包后的代码会压缩成一行。执行 npm run dev
命令,会启动一个本地服务,打开 http://localhost:8090/
网址就可以看到我们的网页。这样当我们修改 Less 代码时,保存后浏览器页面会自动更新。
webpack 热更新相关推荐
- 修改html时webpack热更新,webpack学习之路(二)webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
- webpack热更新实现
原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...
- less webpack 热更新_webpack---less+热更新 使用
最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能. 一.使用less less是一门css预处 ...
- 理解 webpack 热更新
一.开启:HotModuleReplacementPlugin/--hot 二.webpack 编译构建后,控制台出现: 1.新的 hash 值 // 作为下次热更新的标识 2.新的 json 文件 ...
- webpack热更新和常见错误处理
时间:2016-11-03 10:50:54 地址:https://github.com/zhongxia245/blog/issues/45 webpack热更新 一.要求 局部刷新修改的地方 二. ...
- webpack 热更新原理解析
一.什么是 HMR HMR 全称 Hot Module Replacement,中文语境通常翻译为模块热更新,它能够在保持页面状态的情况下动态替换资源模块,提供丝滑顺畅的 Web 页面开发体验. 1. ...
- webpack热更新原理-连阿珍都看懂了
前言 在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果.操作不方便且页面之前的编辑记录也都丢失,体验可以说为0.想象一下一个表达你努力填满了所有输入项,结 ...
- webpack热更新
什么是模热更新?有什么优点 模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新. 在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器. 优 ...
- 【Webpack】1047- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
- webpack热更新原理
webpack热更新原理 文章目录 webpack热更新原理 一.什么是热更新? 二.webpack热更新基本原理 1.修改webpack.config.js的entry配置 2.启动本地服务 3.监 ...
最新文章
- Unity3D深入浅出 -组件与节点之间的调用关系
- 【虚拟化】docker部署Rabbitmq
- Spring Boot——基于OkHTTP的GitHub第三方登录DEMO
- CISCO2621 基本配置步骤
- Scala中那些令人头痛的符号
- C++类内存结构布局
- [leetcode-108,109] 将有序数组转换为二叉搜索树
- 组态王opc_组态王和西门子S7300、S7400系列PLC通讯的几种配置方案
- Tensorflow 卷积神经网络 (二)
- kubernetes的常用命令
- xpage 传参_jQuery iScroll.js 移动端滚动条美化插件第1/5页
- Ubuntu 16.04 安装 VMware Tools(解决windows和Ubuntu之间不能互相复制粘贴文件的问题)
- python对文件的读取
- C++二叉树的 前中后序遍历(学C++必看必会)深度优先遍历详解
- 论文阅读《A Survey on Deeping Learning In Medical Image Analysis》
- GANDCRAB V5.2勒索病毒,不可破解,尽快防御!
- ps:修改图片背景颜色
- css设置文字外发光
- 简记_插件电阻功率选型及使用注意事项
- Laravel第三方登录开发之实现QQ登录