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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
vue.js表格分页示例
Oct 18 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
原生js实现九宫格拖拽换位
Jan 26 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中文分词的简单实现代码分享
2011/07/17 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python类装饰器用法实例
2015/06/04 Python
python交互式图形编程实例(二)
2017/11/17 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python os.fork() 循环输出方法
2019/08/08 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
怎么写有吸引力的自荐信
2013/11/17 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
首席执行官观后感
2015/06/03 职场文书
情感电台广播稿
2015/08/18 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
详解OpenCV曝光融合
2022/04/29 Python