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 =,
devserver: ,
module: ,]的簡寫
loader: 'file-loader',
options: 
},//other vue-loader options go here
} }]},
devtool: 'inline-source-map',
output: ,
};

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(jquery('body'))
console.log(angular)
if(module.hot)

var chunk1=2;

var a= 12399exports.chunk1=chunk1;

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

此時，webpack會生成兩份檔案，如下圖:

分別是chunknumber+previoushash+hot-update.json和chunknumber+previoushash+hot-update.js

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

這些檔案處於記憶體中，因此我們在瀏覽器內檢視具體內容:

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

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

瀏覽器控制台輸出:

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

webpack熱替換心得

1.在webpack熱替換中，修改檔案後頁面是進行區域性重新整理而不是過載頁面。2.在webpack熱替換中，修改某乙個檔案後，該檔案與相關的檔案 即import該檔案的檔案 會進行替換，從而重新執行其中的 頁面會進行區域性重新整理。3.在webpack熱替換中，如果乙個檔案 hello.js 被其...

webpack熱更新原理

webpack dev server 主要包含了三個部分 1.webpack 負責編譯 2.webpack dev middleware 主要負責構建記憶體檔案系統，把webpack的 outputfilesystem 替換成 inmemoryfilesystem。同時作為express的中介軟體攔...

webpack 概念9 模組熱替換

讓我們從不同角度出發 1 在應用程式中 除了普通資環，編譯器 compiler 需要發出update，允許更新之前的版本到新的版本，update由2部分構成 1 更新後的manifest json 2 乙個或者多個更新後的chunk js manifest包括新的編譯hash和所有的待更新chunk...