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 相关文章推荐
JS中style属性
Oct 11 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
一些mootools的学习资源
2010/02/07 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python清除函数占用的内存方法
2018/06/25 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
马智宇婚礼主持词
2014/03/22 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书