前言

檔案監聽是在原始碼發生變化時，自動重新構建出新的輸出檔案。
webpack 開啟監聽模式，有兩種方式：

1.啟動 webpack 命令時，帶上 --watch 引數。
唯一缺點：需要手動重新整理才能看到變化；

2.在配置 webpack.config.js 中設定 watch: true。
優點：
(1) WDS 不重新整理瀏覽器
(2) WDS 不輸出檔案，⽽是放在記憶體中
(3) 使⽤用 HotModuleReplacementPlugin 外掛

1 第一種方式， --watch

1.1 配置package.json

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

1.2 到控制檯輸入 npm run watch

1.3 修改檔案，儲存後，會自動打包，到瀏覽器重新整理，才能看到變化。

1.4 檔案監聽的原理理分析

輪詢判斷檔案的最後編輯時間是否變化

某個⽂件發⽣生了了變化，並不會⽴刻告訴監聽者，⽽是先快取起來，等 aggregateTimeout

module.export = {
 //預設 false，也就是不不開啟
 watch: true,//只有開啟監聽模式時，watchOptions才有意義
 wathcOptions: {
 //預設為空，不監聽的檔案或者資料夾，支援正則匹配
 ignored: /node_modules/,//監聽到變化發生後會等300ms再去執行，預設300ms
 aggregateTimeout: 300,//判斷檔案是否發生變化是通過不停詢問系統指定檔案有沒有變化實現的，預設每秒問1000次
 poll: 1000
 }
}

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

2.1 配置package.json

{
 // ...
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open" // 新增配置，執行 npm run dev 會自動開啟瀏覽器
 }
 // ...
}

2.2 配置webpack.config.js

'use strict'
 
const path = require('path');
var webpack = require('webpack'); // 引進 webpack
module.exports = {
 // ...
 mode:'development',// production 改為開發環境，因為只有開發環境才用到熱更新
 module:{
 // ...
 },plugins:[
   new webpack.HotModuleReplacementPlugin()
  ],devServer:{
   contentBase:'./dist',hot: true
  }
}

2.3 到控制檯執行 npm run dev，即可執行！

到此這篇關於詳解webpack的檔案監聽實現(熱更新)的文章就介紹到這了,更多相關webpack 檔案監聽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！