webpack Hot Module Replacement 热模块替换

我们先改一下 index.js  文件。如下。

import './style.css';

var button = document.createElement('button');
button.innerHTML = "新增";
document.body.appendChild(button);

button.onclick = function() {
	var div = document.createElement('div');
	div.innerHTML = "item";
	document.body.appendChild(div);
}

使用命令 npm install start 然后在浏览器中查看页面。

下面我们添加一个样式，在第偶数个的item 添加一个背景颜色。

div:nth-of-type(odd) {
	background: blue;
}

这个时候，如果我们更改样式，页面会刷新，然后以前的点击都清空了，需要重新点击。

如果我们不想把以前的东西都清空，即不用把文件都删掉再打包，直接把变动的部分替换掉就好，那么就需要使用模块热替换。

下面我们来使用Hot Module Replacement (HMR)。

首先，我们在webpack.config.js 中配置一下。找到devServer 配置项，hot 设置为 true，顺带也配置hotOnly（即使HMR没有生效 浏览器也不会自动更新） 为 true。如下。

	devServer: {
		contentBase: './dist',
		open: true,
		hot: true,
		hotOnly: true
	},

然后我们需要用到一个插件，这个是webpack 自带的插件，因此我们先引用webpack。然后再在plugins 配置项中实例化。如下。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	mode: "development",
	devtool: "cheap-module-source-map",
	devServer: {
		contentBase: './dist',
		open: true,
		hot: true,
		hotOnly: true
	},
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		},{
			test: /\.css$/,
			use: ['style-loader',
				'css-loader',
				'postcss-loader']
		}]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		publicPath: "/",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(),
		new webpack.HotModuleReplacementPlugin()
	]
}

好啦，然后重启一下服务器，启动即可。