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に設定され、HMRが有効でなくてもブラウザが自動的に更新されないhotOnlyも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()
	]
}

はい、それからサーバーを再起動して、起動すればいいです.