webpack熱替換原理

前期准備:

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

module.exports = {
  entry: {
    main: './src/main.js'
  },
  devServer: {
      historyApiFallback: true,
    contentBase: './dist'
  },
  module: {
      rules: [
      {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
      },{
            test: /\.(png|jpg|gif|svg)$/,
            //loader是use[{loader}]的簡寫
        loader: 'file-loader',
        options: {
              name: '[name].[ext]?[hash]'
        }
    },{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
              loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
              }
              // other vue-loader options go here
        }
      }
      ]
  },
  devtool: 'inline-source-map',
  output: {
      //非覆蓋更新
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/a/'
    },
};

import chunk1 from './chunk1'
import chunk2 from './chunk2'
import aa from './aa.css'

var jquery =require('jquery')
var angular =require('angular')
console.log(333)
document.onclick= function(){
    console.log(aa)
}
console.log(jquery('body'))
console.log(angular)


if(module.hot){
    module.hot.accept('./chunk1.js');
}

var chunk1=2;
var a= 12399
exports.chunk1=chunk1;

 

讓我們先進行一次熱加載：修改chunk1.js，將a的值改為123

此時，webpack會生成兩份文件，如下圖:

分別是chunkNumber+previousHash+hot-update.json和chunkNumber+previousHash+hot-update.js

previousHash上一次生成的hash值（每一次構建都會生成一個hash值）

這些文件處於內存中，因此我們在瀏覽器內查看具體內容:

hot-update.json:

解析:

h(hash)當前生成的hash值, c(chunkHash) 發生變更的module的編號，chunk1的編號是0

hot-update.js：

 

webpackHotUpdate函數的三個參數分別為: 對編號為0的module進行更新，更新module的編號，及新內容

 

瀏覽器控制台輸出:

5即更新module的編號，與webpackHotUpdate對應