隨着深入學習,新的知識點不斷出現,一些知識點可能涉及到很深的知識架構,這裏只是簡單的接觸,並不深入,在以後深入使用時再做詳細介紹。
模塊熱替換
模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊,而無需進行完全刷新。
這裏是他的一個詳細概念。
前面說了, 使用 webpack-dev-server 可以實現瀏覽器自動加載、自動重新加載編譯後的代碼,這就是頁面的自動刷新,但這裏的刷新,是頁面整體的完全刷新,而模塊熱替換,實現的是頁面模塊(比如一個按鈕的功能修改)的更新,而無需重新加載整個頁面。
啓用 HMR 功能第一步
HMR 的啓用十分簡單,
一、首先是更新 webpack-dev-server 的配置,和使用 webpack 內置的 HMR 插件即可。同時刪掉 print.js 的入口起點,因爲它現在正被 index.js 模塊使用
webpack-dev-server
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');
module.exports = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
+ hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
二、修改 index.js 文件,以便當 print.js 內部發生變更時可以告訴 webpack 接受更新的模塊
index.js
...
document.body.appendChild(component());
+
+ if (module.hot) {
+ module.hot.accept('./print.js', function() {
+ console.log('Accepting the updated printMe module!');
+ printMe();
+ })
+ }
三、命令行啓用服務 npm start
四、更改 print.js 中 console.log 的輸出內容
print.js
export default function printMe() {
- console.log('I get called from print.js!');
+ console.log('Updating print.js...')
}
顯示器輸出如下
console
以上,就啓用了 HMR 功能,實現了單擊按鈕模塊的熱更新,但這裏還有個小問題,就是如果繼續點擊示例頁面上的按鈕,會發現控制檯仍在打印這舊的 printMe 功能。
啓用 HMR 功能第二步
使用 module.hot.accept 更新綁定到新的 printMe 函數上
index.js
...
- document.body.appendChild(component());
+ let element = component(); // 當 print.js 改變導致頁面重新渲染時,重新獲取渲染的元素
+ document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
- printMe();
+ document.body.removeChild(element);
+ element = component(); // 重新渲染頁面後,component 更新 click 事件處理
+ document.body.appendChild(element);
})
}
這樣,但修改 print.js 的輸出內容後,頁面實現自動刷新,當再次點擊按鈕時,輸出內容會更改
使用 HMR 修改樣式表
藉助於 style-loader 的幫助,CSS 的模塊熱替換實際上是相當簡單的。當更新 CSS 依賴模塊時,此 loader 在後臺使用 module.hot.accept 來修補(patch)
一、安裝兩個 loader
cnpm install --save-dev style-loader css-loader
注意
這裏最好是再裝一遍兩個 loader ,雖然之前第一節的時候已經裝了一遍,但(由於我刪了重裝好幾遍 node_modules 文件夾,導致這裏沒重裝報錯,具體原因也不甚明瞭)最好還是重裝一遍
二、更新 webpack 的配置,讓這兩個 loader 生效
三、手動添加 style.css 樣式表
四、導入 index.js 文件中
具體請參考webpack筆記二 管理資源之加載css、圖片、字體、數據.
五、將 hello 上的樣式修改爲 color: blue;,可以立即看到 Hello webpack 的字體顏色隨之更改,而無需完全刷新。