webpack之模块热替换
HMR是webpack内置的，只能用在开发模式，不能用于生产模式。是webpack提供的最有用的功能之一。
1.更新webpack-dev-server配置
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('htmlwebpackplugin');
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 HtmlWebpackPlugin({
title: 'jkkk'
}),
+ new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname,'dist')
}
}第二种可选的方法就是命令行修改webpack-dev-server的配置：webpack-dev-serve --hotOnly
2. 修改index.js文件以及它导入的js文件。
在index.js里，进行更新绑定当依赖的模块有变化时，做些事情。
import _ from 'loadash';
import printMe from './print.js';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
+ if(module.hot){
+ module.hot.accept('./print.js',function(){//依赖模块改变时
+ console.log('accepting the updated printMe...');
+ printMe();
+ });
}修改print.js文件之前，我们npm run dev，查看运行结果，以便和后续修改print.js文件后作对比。
print.js：
export default function printMe() {
- console.log('I get called from print.js!');
+ console.log('Updating print.js...')
}修改print.js后，不用刷新就可以在浏览器console中发现类似下面的内容：
[HMR] Waiting for update signal from WDS...
main.js:4395 [WDS] Hot Module Replacement enabled.
+ 2main.js:4395 [WDS] App updated. Recompiling...
+ main.js:4395 [WDS] App hot update...
+ main.js:4330 [HMR] Checking for updates on the server...
+ main.js:10024 Accepting the updated printMe module!
+ 0.4b8ee77….hot-update.js:10 Updating print.js...
+ main.js:4330 [HMR] Updated modules:
+ main.js:4330 [HMR] - 20
+ main.js:4330 [HMR] Consider using the NamedModulesPlugin for module names.进行完以上两步后，发现两个问题。一、第一次确实可以更新到内容，但是后面修改print.js文件的内容就再也无法在浏览器看到输出了。二、点击示例页面上的按钮，你会发现控制台仍在打印这旧的 printMe 功能。这是因为按钮的 onclick 事件仍然绑定在旧的 printMe 函数上。
因此，第三步是很必要的步骤
3. 在module.hot.accept里更新绑定新的函数
import _ from 'lodash';
import printMe from './print.js';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick 事件绑定原始的 printMe 函数上
element.appendChild(btn);
return element;
}
- 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);
})
}更新后发现点击按钮还是执行原来的函数，这个问题暂时还没解决。原本这个内容就很容易出错，运行不了，但是loader会使模块热替换变得容易。
4.模块热替换+loader
1.安装
npm install --save-dev style-loader css-loader2.配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
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 HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};style.css:
body {
background: blue;
}index.js:
import _ from 'lodash';
import printMe from './print.js';
+ import './styles.css';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; // onclick event is bind to the original printMe function
element.appendChild(btn);
return element;
}
let element = component();
document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}vue-loader：此 loader 支持用于 vue 组件的 HMR，提供开箱即用体验。
3.自动编译代码和模块热替换的区别
自动编译代码：实时重新加载，重新加载整个页面。
模块热替换：避免重新加载整个页面。
模块热替换是在自动编译的基础上进行的！