我们使用webpack-dev-server并没有把打包生成的dist目录，而是我们将生成的文件放在了内存中，从而提高了打包的速率。但是我们修改了webpack文件之后，最好进行重启，防止使用的还是之前的webpack配置。
实践
我们先看一段代码
// 点击 button ，就会在界面上增一个item的字
var btn = document.createElement('button');
btn.innerHTML = 'add';
document.body.appendChild(btn);
btn.onclick = function() {
var div = document.createElement('div');
div.innerHTML = 'item';
document.body.appendChild(div);
};
现在我们的想法，是给第偶数个item增加一个颜色js代码保持不变，但是要引入一个style.css文件
import './style.css';
var btn = document.createElement('button');
btn.innerHTML = 'add';
document.body.appendChild(btn);
btn.onclick = function() {
var div = document.createElement('div');
div.innerHTML = 'item';
document.body.appendChild(div);
};
css文件的写法
div:nth-of-type(odd) {
background: yellow;
}
但是这样我们就发现了一个新的问题，我们只是刷新了样式，但是却将整个界面的都刷新了，导致我们之前点击生成item都不见了，我们期望是只替换了样式，但是不进行界面的刷新
const path = require('path'); // node 中的内置模块路径
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'chep-module-eval-source-map',
devServer: {
contentBase: './dist',
open: true, // 会自动打开一个浏览器
proxy: 8000,
hot: true, // 让我们的webpack开启hot-module-replacment
hotOnly: true // 即使HMR没有生效，也不让浏览器进行自动的刷新
},
entry: './src/index.js', // 打包的入口文件
module: {
rules: [
{
test: /\.(jpg|png)$/, // 用正则标识对哪些文件进行处理
use: {
loader: 'url-loader', // 对于满足正则的文件使用什么loader，这个loader需要通过npm 进行安装
options: {
// placeholder 占位符
name: '[name].[ext]', // 以相同的文件名和后缀进行打包
outputPath: 'images/'
}
}
},
{
test: /\.css$/, // 用正则标识对哪些文件进行处理
use: ['style-loader', 'css-loader', 'postcss-loader'] // loader 的执行顺序是从下到上，从右到左
}
]
},
plugins: [new webpack.HotModuleReplacementPlugin()],
output: {
filename: 'bindle.js', // 打包后输出的文件的名字
path: path.resolve(__dirname, 'dist') // 绝对路径,__dirname是webpack.config.js所在的路径的位置,输出的文件放在bundle的文件夹下
}
};
我们开启了HMR，主要的配置 改变在
webpack的配置的改变
webpack的配置的改变
主要改变的参数是devServer，plugins
我们看一下HMR在js中如何应用
我们的期望是，我们引入了counter.js和number.js的文件，我们期待我们更改number.js文件的时候，只是刷新number.js这部分的内容。而不是进行整个页面的刷新。
number.js
// 一个数字在屏幕上显示，点击数字的时候，会进行数字加一的操作
function number() {
var div = document.createElement('div');
div.setAttribute('id', 'number');
div.innerHTML = 1000;
document.body.appendChild(div);
}
export default number;
counter.js
// 一个数字在屏幕上显示，点击数字的时候，会进行数字加一的操作
function counter() {
var div = document.createElement('div');
div.setAttribute('id', 'counter');
div.innerHTML = 1;
div.onclick = function() {
div.innerHTML = parseInt(div.innerHTML, 10) + 1;
};
document.body.appendChild(div);
}
export default counter;
index.js
import { counter } from './counter';
import { number } from './number';
counter();
number();
if (module.hot) {
// 如果number这个文件发生了变化，就会执行后面的函数,react和vue内置了HMR的代码，我们不需要去手写
module.hot.accept('./number.js', () => {
document.body.removeChild(document.getElementById('number'));
number();
});
}
其中if的代码的添加，我们如果不添加这一段代码，我们会发现我们改变number.js文件中的内容，页面没有刷新，但是number这个文件在界面渲染的值页没有发生改变，所有我们需要写一段代码，让其刷新。
