共计 2031 个字符，预计需要花费 6 分钟才能阅读完成。
模块热替换 (Hot Module Replacement 或 HMR) 是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。
启用 HMR
启用此功能实际上相当简单。而我们要做的，就是更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点，因为它现在正被 index.js 模式使用。
修改 webpack.config.js
…
const webpack = require(‘webpack’)
module.exports = {
entry: {
app: ‘./src/index.js’
},
devtool: ‘inline-source-map’,
devServer: {
contentBase: ‘/dist’，
hot: true
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({// 使用 htmwebpackplugin 插件
title: ‘Output Management’
}),
new webpack.NamedModulesPlugin(), // 以便更容易查看要修补 (patch) 的依赖。
new webpack.HotModuleReplacementPlugin()
],
…};
注意，我们还添加了 NamedModulesPlugin，以便更容易查看要修补 (patch) 的依赖。在起步阶段，我们将通过在命令行中运行 npm start 来启动并运行 dev server。
现在，我们来修改 index.js 文件，以便当 print.js 内部发生变更时可以告诉 webpack 接受更新的模块。
修改 index.js
import _ from ‘lodash’
import printMe from ‘./print.js’
function component () {
var ele = document.createElement(‘div’)
var btn = document.createElement(‘button’)
ele.innerHTML = _.join([‘hello’, ‘webpack’, ‘world’], ‘ ‘)
btn.innerHTML = ‘click me and check the console’
btn.onclick = printMe
ele.appendChild(btn)
return ele;
}
document.body.appendChild(component());
if (module.hot) {
module.hot.accept(‘./print.js’, function () {
console.log(‘accepting the updated printMe module!’);
printMe()
})
}
随意修改 print.js 浏览器中可以看到实时变化
通过 Node.js API
HMR 修改样式表
安装 stylee-loader css-loader
cnpm install –save-dev style-loader css-loader
修改 webpack.config.js
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’) // 引入 htmwebpackplugin 插件
const CleanWebpackPlugin = require(‘clean-webpack-plugin’) // 引入 CleanWebpackPlugin 插件
const webpack = require(‘webpack’)
module.exports = {
entry: {
app: ‘./src/index.js’
},
devtool: ‘inline-source-map’,
devServer: {
contentBase: ‘/dist’,
hot: true
},
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
}]
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({// 使用 htmwebpackplugin 插件
title: ‘Output Management’
}),
new webpack.NamedModulesPlugin(), // 以便更容易查看要修补 (patch) 的依赖。
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: ‘[name].bundle.js’,
// __dirname 表示当前文件所在的目录的绝对路径
path: path.resolve(__dirname, ‘dist’),
publicPath: ‘/’
}
};
cnpm start 启动服务
修改样式文件
