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 相关文章推荐
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
vue自定义树状结构图的实现方法
Oct 18 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
zend framework文件上传功能实例代码
2013/12/25 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
降低PHP Redis内存占用
2017/03/23 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
UML设计模式笔试题
2014/06/07 面试题
年度优秀员工获奖感言
2014/08/15 职场文书
七一建党节演讲稿
2014/09/11 职场文书
检讨书范文500字
2015/01/28 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
创业计划书之熟食店
2019/10/16 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js