詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)

更新時(shí)間：2020年09月11日 14:13:46 作者：kaiking_g

這篇文章主要介紹了詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

文件監(jiān)聽(tīng)是在源碼發(fā)生變化時(shí)，自動(dòng)重新構(gòu)建出新的輸出文件。
webpack 開(kāi)啟監(jiān)聽(tīng)模式，有兩種方式：

1.啟動(dòng) webpack 命令時(shí)，帶上 --watch 參數(shù)。
唯一缺點(diǎn)：需要手動(dòng)刷新才能看到變化；

2.在配置 webpack.config.js 中設(shè)置 watch: true。
優(yōu)點(diǎn)：
(1) WDS 不刷新瀏覽器
(2) WDS 不輸出文件，⽽是放在內(nèi)存中
(3) 使⽤用 HotModuleReplacementPlugin 插件

1 第一種方式， --watch

1.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch": "webpack --watch" // 新增配置
 }
 // ...
}

1.2 到控制臺(tái)輸入 npm run watch

1.3 修改文件，保存后，會(huì)自動(dòng)打包，到瀏覽器刷新，才能看到變化。

1.4 文件監(jiān)聽(tīng)的原理理分析

輪詢(xún)判斷文件的最后編輯時(shí)間是否變化

某個(gè)⽂件發(fā)⽣生了了變化，并不會(huì)⽴刻告訴監(jiān)聽(tīng)者，⽽是先緩存起來(lái)，等 aggregateTimeout

module.export = {
 //默認(rèn) false，也就是不不開(kāi)啟
 watch: true,
 //只有開(kāi)啟監(jiān)聽(tīng)模式時(shí)，watchOptions才有意義
 wathcOptions: {
 //默認(rèn)為空，不監(jiān)聽(tīng)的文件或者文件夾，支持正則匹配
 ignored: /node_modules/,
 //監(jiān)聽(tīng)到變化發(fā)生后會(huì)等300ms再去執(zhí)行，默認(rèn)300ms
 aggregateTimeout: 300,
 //判斷文件是否發(fā)生變化是通過(guò)不停詢(xún)問(wèn)系統(tǒng)指定文件有沒(méi)有變化實(shí)現(xiàn)的，默認(rèn)每秒問(wèn)1000次
 poll: 1000
 }
}

2 第二種方式，在配置 webpack.config.js 中設(shè)置 watch: true（熱更新:webpack-dev-server）

2.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "dev": "webpack-dev-server --open" // 新增配置，運(yùn)行 npm run dev 會(huì)自動(dòng)打開(kāi)瀏覽器
 }
 // ...
}

2.2 配置webpack.config.js

'use strict'
 
const path = require('path');
var webpack = require('webpack'); // 引進(jìn) webpack
module.exports = {
 // ...
 mode:'development', // production 改為開(kāi)發(fā)環(huán)境，因?yàn)橹挥虚_(kāi)發(fā)環(huán)境才用到熱更新
 module:{
 // ...
 },
  plugins:[
   new webpack.HotModuleReplacementPlugin()
  ],
  devServer:{
   contentBase:'./dist',
   hot: true
  }
}

2.3 到控制臺(tái)運(yùn)行 npm run dev，即可運(yùn)行！

到此這篇關(guān)于詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)的文章就介紹到這了,更多相關(guān)webpack 文件監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: