webpack 模块热替换原理

网络编程 2021-07-04 17:34www.168986.cn编程入门

这篇文章主要介绍了webpack 模块热替换原理，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

全称是Hot Module ReplaceMent(HMR)，理解成热模块替换或者模块热替换都可以吧，和.中的热插拔一个意思，就是在运行中对程序的模块进行更新。这个功能主要是用于开发过程中，对生产环境没有任何帮助(这一点区别.热插拔)。效果上就是界面的无刷新更新。

HMR基于，style-loader可以通过它来实现无刷新更新样式。对于JavaScript模块就需要做一点额外的处理，怎么处理继续往下看。因为HMR是用于开发环境的，所以我们修改下配置，做两份准备。一个用于生产，一个用于开发。

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 monConfig={
 entry: {
  app: PATHS.app,
 },
 output: {
  path: PATHS.build,
  filename: '[name].js',
 },
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Webpack demo',
  }),
 ],
}
 
function developmentConfig(){
 const config ={
  devServer:{
   //使能历史记录api
   historyApiFallback:true,
    hotOnly:true,//关闭热替换 注释掉这行就行
    stats:'errors-only',
   host:process.env.Host,
   port:process.env.PORT,
   overlay:{
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
  ],
 };
  return Object.assign(
  {},
  monConfig,
  config,
  {
   plugins: monConfig.plugins.concat(config.plugins),
  }
 );
}

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

这个webpack.config.js建立了两个配置，一个是monConfig，一个是developmentConfig 两者通过env参数来区分，但这个env参数是怎么来的呢？我们看看之前的package.json中的一段

也就是说，如果按照上面的这个配置，我们通过npm start 启动的话，进入的就是开发环境配置，如果是直接build，那么就是生产环境的方式。build方式是里面讲的直接通过npm启动webpack，这就不带WDS了。有了一个语法，将配置合并。这个时候通过npm start启动，控制台打印出了两条日志。

看起来HRM已经启动了。此时更新一下ponent.js

日志显示没有东西被热更新。而且这个39,36代表的是模块Id，看起来很不直观，这里可以通过一个插件使其更符合人意

plugins: [
   new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],

这个时候再启动。

这样名称就直观了。我们期待的更新还是没有出来。因为需要实现一个接口

import ponent from './ponent';
let demoComponent=ponent();
document.body.appendChild(demoComponent);

//HMR 接口
if(module.hot){
  module.hot.aept('./ponent',()=>{
    const nextComponent=ponent();
    document.body.replaceChild(nextComponent,demoComponent);
    demoComponent=nextComponent;
  })
}

并修改ponent.js:

export default function () {
 var element = document.createElement('h1');
 element.innerHTML = 'Hello webpack';
 return element;
}

这个时候页面更新了。每次改动页面上都会增加一个带有hot-update.js ，类似于狼蚁网站SEO优化这样

webpackHotUpdate(0,{

// "./app/ponent.js":
// (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/ harmony default export / __webpack_exports__["default"] = function () {
 var element = document.createElement('h1');
 element.innerHTML = 'Hello web ';
 element.className='box';
 return element;
};

// })

})

通过webpackHotUpdate对相应模块进行更新。0表示模块的id，"./app/ponent.js"表示模块对应的name。结构是webpack(id,{key:function(){}})。function外带了一个括号，不知道有什么作用。webpackHotUpdate的定义是这样的

this["webpackHotUpdate"] = 
 function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars  
     hotAddUpdateChunk(chunkId, moreModules);
    if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
  } ;

小结从结构来看，一个是id，一个是对应修改的模块。但实际执行更新的是hotApply方法。热更新整个机制还是有点复杂，效果上像MVVM的那种绑定。有兴趣的可以深入研究下。不建议在生产使用HMR，会让整体文件变大，而且对生成没有什么帮助，在下一节会讲样式的加载，style-loader就是用到了HMR。但对于js模块还要写额外的代码，这让人有点不爽。

demo

参考

系列

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：快速搭建vue2.0+boostrap项目的方法下一篇：Angular5升级RxJS到5.5.3报错：EmptyError: no elements in

webpack 模块热替换原理

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

webpack 模块热替换原理

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设