注意：
本文假設你有webpack 的基礎認識。
本文的目的是實現模塊熱替換的功能。
它的作用是允許在運行時更新各種模塊時，而無需進行完全刷新。這比實時刷新整個頁面更加高效。
因此它是建立在實時刷新的基礎上的。
項目結構如下所示：
開始實戰
創建一個目錄<code>webpack-demo5</code>,并安裝<code>wbepack</code>。
mkdir webpack-demo5 && cd webpack-demo5
npm init -y
npm install --save-dev webpack
安裝 <code>webpack-dev-server</code>,<code>style-loader</code>,<code>css-loader</code>
npm install webpack-dev-server style-loader css-loader --save-dev
webpack-dev-server的作用是為你提供了一個服務器和實時刷新的功能。
public文件夾是個存放靜態資源的地方。
新建<code>index.html</code>文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="/build.js"></script>
</body>
</html>
注意：圖片路徑和js文件路徑都不是本地路徑，都是服務器路徑。
新建<code>index.css</code>文件
.root {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background: red;
color: white;
}
新建<code>base.js</code>模塊文件
//更改body的背景顏色
export function change(){
document.body.style.background="yellow";
}
新建<code>index.js</code>文件
import './index.css';
import {change} from './base.js'
function create(){
const elem = document.createElement('div');
elem.classList.add('root');
elem.innerHTML = 'Hello World';
document.body.appendChild(elem);
}
create();
change();
if (module.hot) {
module.hot.accept('./base.js', function() {
console.log('Accepting the updated library module!');
change();
})
}
<code>module.hot.accept()</code>接受對給定模塊使用“模塊熱替換”更新。
上述代碼表示：當base模塊改變了，會實時通過“模塊熱替換”更新，頁面無需刷新。當我們index.js時，只能通過刷新頁面的方式更新。
新建<code>web pack.config.js</code>文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'public'),
publicPath: '/'
}
}
<code> new webpack.HotModuleReplacementPlugin() </code>表示啟用“模塊熱替換”功能。
<code> hot: true, </code> 用來告訴 dev-server 我們在使用 HMR
<code> contentBase: path.resolve(__dirname, 'public'),</code>用來指定靜態資源的路徑
<code> publicPath </code>設置打包文件的路徑。
因為使用了<code>style-loader</code>，所以我們可以利用‘模塊熱替換’來更新css代碼。原理是：style-loader 在后臺使用 module.hot.accept 來修補(patch) <style> 標簽。
最后我們來修改package.json文件中的'script'
"scripts": {
"start": "webpack-dev-server --open"
}
使用命令打包：
npm start
你可以嘗試著修改各個文件，看不看哪些是用‘實時刷新’功能，哪些是‘模塊熱替換’功能。
