溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
webpack如何實現監聽文件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
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",
"build": "webpack",
"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，即可運行！
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
