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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 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实现用户认证及管理完全源码
2007/03/11 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
css配合jquery美化 select
2013/11/29 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
详谈python http长连接客户端
2017/06/12 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python 创建TCP服务器的方法
2020/07/28 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
名企HR怎样看待求职信
2014/02/23 职场文书
2014年计生标语
2014/06/23 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
个人借款协议书范本
2014/11/17 职场文书
工作简历自我评价
2015/03/11 职场文书
在校学生证明格式
2015/06/24 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python