溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
全稱是Hot Module ReplaceMent(HMR)，理解成熱模塊替換或者模塊熱替換都可以吧，和.net中的熱插拔一個意思，就是在運行中對程序的模塊進(jìn)行更新。這個功能主要是用于開發(fā)過程中，對生產(chǎn)環(huán)境沒有任何幫助(這一點區(qū)別.net熱插拔)。效果上就是界面的無刷新更新。
HMR基于WDS，style-loader可以通過它來實現(xiàn)無刷新更新樣式。但是對于JavaScript模塊就需要做一點額外的處理，怎么處理繼續(xù)往下看。因為HMR是用于開發(fā)環(huán)境的，所以我們修改下配置，做兩份準(zhǔn)備。一個用于生產(chǎn)，一個用于開發(fā)。
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,
},
output: {
path: PATHS.build,
filename: '[name].js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
}),
],
}
function developmentConfig(){
const config ={
devServer:{
//使能歷史記錄api
historyApiFallback:true,
hotOnly:true,//關(guān)閉熱替換 注釋掉這行就行
stats:'errors-only',
host:process.env.Host,
port:process.env.PORT,
overlay:{
errors:true,
warnings:true,
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
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;
};
這個webpack.config.js建立了兩個配置，一個是commonConfig，一個是developmentConfig 兩者通過env參數(shù)來區(qū)分，但這個env參數(shù)是怎么來的呢？我們看看之前的package.json中的一段：
也就是說，如果按照上面的這個配置，我們通過npm start 啟動的話，進(jìn)入的就是開發(fā)環(huán)境配置，如果是直接build，那么就是生產(chǎn)環(huán)境的方式。build方式是第一節(jié)里面講的 直接通過npm啟動webpack，這就不帶WDS了。另外有了一個Object.assign語法，將配置合并。這個時候通過npm start啟動，控制臺打印出了兩條日志。
看起來HRM已經(jīng)啟動了。但是此時更新一下component.js
日志顯示沒有東西被熱更新。而且這個39,36代表的是模塊Id，看起來很不直觀，這里可以通過一個插件使其更符合人意
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
這個時候再啟動。
這樣名稱就直觀了。但是我們期待的更新還是沒有出來。因為需要實現(xiàn)一個接口
import component from './component';
let demoComponent=component();
document.body.appendChild(demoComponent);
//HMR 接口
if(module.hot){
module.hot.accept('./component',()=>{
const nextComponent=component();
document.body.replaceChild(nextComponent,demoComponent);
demoComponent=nextComponent;
})
}
并修改component.js:
export default function () {
var element = document.createElement('h2');
element.innerHTML = 'Hello webpack';
return element;
}
這個時候頁面更新了。每次改動頁面上都會增加一個帶有hot-update.js ，類似于下面這樣：
webpackHotUpdate(0,{
/***/ "./app/component.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('h2');
element.innerHTML = 'Hello web ';
element.className='box';
return element;
};
/***/ })
})
通過webpackHotUpdate對相應(yīng)模塊進(jìn)行更新。0表示模塊的id，"./app/component.js"表示模塊對應(yīng)的name。結(jié)構(gòu)是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);
} ;
小結(jié)：從結(jié)構(gòu)來看，一個是id，一個是對應(yīng)修改的模塊。但實際執(zhí)行更新的是hotApply方法。熱更新整個機制還是有點復(fù)雜，效果上像MVVM的那種綁定。有興趣的可以深入研究下。不建議在生產(chǎn)使用HMR，會讓整體文件變大，而且對生成沒有什么幫助，在下一節(jié)會講樣式的加載，style-loader就是用到了HMR。但對于js模塊還要寫額外的代碼，這讓人有點不爽。
demo：webpack-ch4_jb51.rar
參考：
https://survivejs.com/webpack/developing/configuring-hmr/
https://webpack.js.org/configuration/dev-server/
系列：
【webpack】-- 自動刷新與解析
【webpack】-- 入門與解析
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼