webpack学习(五)--HMR(hot module Rep

我们使用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这个文件在界面渲染的值页没有发生改变，所有我们需要写一段代码，让其刷新。