webpack热模块替换(HMR)/热更新的方法


Posted in Javascript onApril 05, 2018

这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新。

模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块。 HMR 对于那些由单一状态树构成的应用非常有用。因为这些应用的组件是 “dumb” (相对于 “smart”) 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态。

webpack-dev-server内置“live reload”,会自动刷新页面。

文件目录如下:

  1. app
    1. a.js
    2. component.js
    3. index.js
  2. node_modules
  3. package.json
  4. webpack.config.js

component.js中导入了a.js。index.js导入了component.js。修改任意一个文件,都能达到热更新功能。

最重要的是,在index.js中,有这样一段代码:(完成热更新必须需要)

if(module.hot){
  module.hot.accept(moduleId, callback);
}

下面是package.json配置:

{
 "name": "webpack-hmr",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
  "build": "webpack --env production"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "html-webpack-plugin": "^2.28.0",
  "nodemon": "^1.11.0",
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.4.1"
 }
}

从依赖就可以看到,这真的是一个最简单的配置了。其中nodemon用来监听webpack.config.js文件的状态,只要发生改变,就重新执行命令。

关于”html-webpack-plugin”,在这里是可以省略的。具体的配置请看:https://www.npmjs.com/package/html-webpack-plugin 。

在这里,定义了两个命令,一个是start,用于开发环境;一个是build,用于生产环境。--watch用来监听一个或者多个文件,--exec是nodemon用来执行其它的命令。具体的配置请看:https://c9.io/remy/nodemon。

接下来是webpack.config.js了,既然package.json的scripts中定义了两种命令,我们还是要在配置文件中实现两种情况(development和production,你也可以修改配置其中一种)。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
 app: path.join(__dirname, 'app'),
 build: path.join(__dirname, 'build'),
};

const commonConfig={
 entry: {
  app: PATHS.app + '/index.js',
 },
 output: {
  path: PATHS.build,
  filename: '[name].js',
 },
 watch: true,
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Webpack demo',
  }),
 ],
}

function developmentConfig(){
 const config ={
  devServer:{
   historyApiFallback:true, //404s fallback to ./index.html
   // hotOnly:true, 使用hotOnly和hot都可以
   hot: true,
   stats:'errors-only', //只在发生错误时输出
   // host:process.env.Host, 这里是undefined,参考的别人文章有这个
   // port:process.env.PORT, 这里是undefined,参考的别人文章有这个
   overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NamedModulesPlugin(), // 更新组件时在控制台输出组件的路径而不是数字ID,用在开发模式
   // new webpack.HashedModuleIdsPlugin(), // 用在生产模式
  ],
 };
 return Object.assign( 
  {},
  commonConfig,
  config,
  {
   plugins: commonConfig.plugins.concat(config.plugins),
  }
 );
}

module.exports = function(env){
 console.log("env",env);
 if(env=='development'){
  return developmentConfig();
 }
 return commonConfig;
};

关于Object.assign,第一个参数是目标对象,如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。浅赋值,对于对象的复制使用=,即引用复制。

env参数通过cli传入。

然后打开命令行到当前目录,运行npm start或者npm run build就好啦。注意,前者是在开发环境下,是没有输出文件的(在内存),只有运行后者才会有输出文件。

demo的代码在:https://github.com/yuwanlin/webpackHMR

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

Javascript 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 #Javascript
express默认日志组件morgan的方法
Apr 05 #Javascript
React Native悬浮按钮组件的示例代码
Apr 05 #Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 #Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 #Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 #Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 #Javascript
You might like
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
json字符串传到前台input的方法
2018/08/06 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
利用python修改json文件的value方法
2018/12/31 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
网吧收银员岗位职责
2013/12/14 职场文书
办公室主任先进事迹
2014/01/18 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
英语教研活动总结
2014/07/02 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2015年公司工作总结
2015/04/25 职场文书
初中政教处工作总结
2015/08/12 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python