模組熱替換(hot module replacement 或 hmr)是 webpack 提供的最有用的功能之一。
它允許在執行時更新各種模組，而無需進行完全重新整理。
hmr 不適用於生產環境，這意味著它應當只在開發環境使用。啟用此功能實際上相當簡單。而我們要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 內建的 hmr 外掛程式。
const path =
require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
const cleanwebpackplugin =
require
('clean-webpack-plugin');
+const webpack =
require
('webpack');
module.exports =
, devtool:
'inline-source-map'
, devserver:
, plugins:
[new
cleanwebpackplugin([
'dist'])
,new
htmlwebpackplugin()
,+newwebpack.namedmodulesplugin()
,+newwebpack.hotmodulereplacementplugin()
],output:
};
當使用 webpack dev server 和 node.js api 時，不要將 dev server 選項放在 webpack 配置物件(webpack config object)中。而是，在建立選項時，將其作為第二個引數傳遞。例如：
new webpackdevserver(compiler, options)
想要啟用 hmr，還需要修改 webpack 配置物件，使其包含 hmr 入口起點。webpack-dev-server package 中具有乙個叫做adddevserverentrypoints 的方法，你可以通過使用這個方法來實現。這是關於如何使用的乙個小例子：
const webpackdevserver =
require
('webpack-dev-server');
const webpack =
require
('webpack');
const config =
require
('./webpack.config.js');
const options =
;webpackdevserver.
adddevserverentrypoints
(config, options)
;const compiler =
webpack
(config)
;const server =
newwebpackdevserver
(compiler, options)
;server.
listen
(5000
,'localhost',(
)=>
);
webpack模組熱替換（HMR）在開發環境中應用
效能優化基本介紹 webpack效能優化分為開發環境效能優化和生產環境效能優化。開發環境效能優化分為以下 生產環境效能優化分為 hmr在開發環境中使用 webpack.config.js中 html檔案 預設不能使用hmr功能，同時會導致問題 html檔案不能熱更新 解決 修改entry入口，將ht...
Webpack 的 HMR 執行機制
本場 chat 是為想深入了解 webpack hmr 原理的讀者準備的。內容主要從 chrome 除錯工具 配置檔案 官方文件三個方面，介紹 hmr 如何在頁面不重新整理的前提下，實現前端頁面中程式 的替換。本場 chat 主要內容 利用 chrome 除錯工具發現 hmr 的執行軌跡 弄清楚配置...
webpack配置 公升級版熱更新HMR
在上篇文章中簡單的配置了下熱更新，用於了解的，本篇文章解決熱更新的效能優化問題。在webpack.config.js檔案中的devserver屬性中增加hot true 在配置hot true時，如果出現uncaught error hmr hot module replacement is dis...