這次帶給大家webpack的熱模組替換HMR/熱更新的具體步奏，webpack熱模組替換HMR/熱更新的注意事項有哪些，下面就是實戰案例，一起來看一下。
這是一篇關於webpack熱模組替換的最簡單的配置（不需要react），也稱為熱更新。
模組熱替換(HMR)的作用是，在應用運行時，無需刷新頁面，便能替換、增加、刪除必要的模組。 HMR 對於那些由單一狀態樹構成的應用非常有用。因為這些應用的組件是 “dumb” (相對於 “smart”) 的，所以在組件的程式碼變更後，組件的狀態依然能夠正確反映應用的最新狀態。
webpack-dev-server內建“live reload”，會自動重新整理頁面。
檔案目錄如下：
app
#a.js
#component.js
index.js
#node_modules
#package.json
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;
};登入後複製
env參數透過cli傳入。
然後開啟指令列到目前目錄，執行npm start或npm run build就好啦。請注意，前者是在開發環境下，是沒有輸出檔案的（在記憶體），只有執行後者才會有輸出檔。
demo的程式碼在：https://github.com/yuwanlin/webpackHMR
###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########怎麼用JS判斷目前頁面是否有捲軸###############mint-ui在vue中的使用方法#########
以上是webpack的熱模組替換HMR/熱更新的具體步奏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
