webpack实战5之模块热替换
注意：
本文假设你有webpack 的基础认识。
本文的目的是实现模块热替换的功能。
它的作用是允许在运行时更新各种模块时，而无需进行完全刷新。这比实时刷新整个页面更加高效。
因此它是建立在实时刷新的基础上的。
项目结构如下所示：
1.jpg
开始实战
创建一个目录<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
你可以尝试着修改各个文件，看不看哪些是用‘实时刷新’功能，哪些是‘模块热替换’功能。
