自動(dòng)刷新
自動(dòng)刷新是指webpack的devServer在監(jiān)聽到文件有變化后馁菜，會觸發(fā)重新構(gòu)建打包筷狼，然后自動(dòng)刷新頁面议忽，源文件的變化就可以實(shí)時(shí)查看效果引润。
配置方式
module.exports = { // ...
devServer: {
port: 8080,
progress: true, // 顯示打包的進(jìn)度條
contentBase: distPath, // 根目錄
open: true, // 自動(dòng)打開瀏覽器
compress: true, // 啟動(dòng) gzip 壓縮
hot: true
},
watch: true, // 開啟監(jiān)聽，默認(rèn)為 false
watchOptions: {
ignored: /node_modules/, // 忽略哪些
// 監(jiān)聽到變化發(fā)生后會等300ms再去執(zhí)行動(dòng)作宗弯，防止文件更新太快導(dǎo)致重新編譯頻率太高
// 默認(rèn)為 300ms
aggregateTimeout: 300,
// 判斷文件是否發(fā)生變化是通過不停的去詢問系統(tǒng)指定文件有沒有變化實(shí)現(xiàn)的
// 默認(rèn)每隔1000毫秒詢問一次
poll: 1000
}
}
缺點(diǎn)
自動(dòng)刷新會使整個(gè)頁面全部刷新脯燃，速度慢，且程序的狀態(tài)會丟失
熱更新
熱更新又叫做模塊熱替換(hot module replacement 或 HMR)蒙保，會在應(yīng)用程序運(yùn)行過程中辕棚，替換、添加或刪除 模塊，而無需重新加載整個(gè)頁面逝嚎。新代碼生效扁瓢，頁面不刷新，狀態(tài)不丟失补君。
配置方式
1引几、引入HotModuleReplacementPlugin插件
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('development')
}),
new HotModuleReplacementPlugin()
],
}
2、配置入口
原來的入口路徑字符串挽铁，改為數(shù)組
module.exports = {
// ...
entry: {
// index: path.join(srcPath, 'index.js'),
index: [
// 對應(yīng)自己本地項(xiàng)目端口
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/dev-server',
path.join(srcPath, 'index.js')
],
other: path.join(srcPath, 'other.js')
},
}
3伟桅、devServer開啟熱更新
module.exports = {
// ...
devServer: {
// ...
hot: true
}
}
4、注冊熱更新范圍
最后一步叽掘，要在代碼中注冊監(jiān)聽范圍楣铁，使用module.hot.accept()函數(shù)指定熱更新監(jiān)聽范圍。 eg:在index.js中更扁，要監(jiān)聽./sum.js文件民褂，如果有更新就馬上執(zhí)行指定函數(shù)：
import { sum } from './math'
// 增加，開啟熱更新之后的代碼邏輯
if (module.hot) {
module.hot.accept(['./math'], () => {
const sumRes = sum(10, 30)
console.log('sumRes in hot', sumRes)
})
}
優(yōu)點(diǎn)
1疯潭、保留在完全重新加載頁面期間丟失的應(yīng)用程序狀態(tài)
2赊堪、只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時(shí)間
3竖哩、在源代碼中 CSS/JS 產(chǎn)生修改時(shí)哭廉，會立刻在瀏覽器中進(jìn)行更新，這幾乎相當(dāng)于在瀏覽器 devtools 直接更改樣式
缺點(diǎn)
要在代碼里注冊熱更新的范圍相叁，增加代碼量遵绰。所以除非代碼太龐大，更新速度很慢增淹，一般開啟熱更新反而會增加開發(fā)開銷椿访。
注意
自動(dòng)刷新和熱更新只能在開發(fā)環(huán)境中使用，即只需要在webpack.dev.js中配置虑润，不可用于生產(chǎn)環(huán)境成玫。原因是自動(dòng)刷新和熱更新都是為了監(jiān)聽源文件變化而進(jìn)行更新，生產(chǎn)環(huán)境都是打包好的靜態(tài)文件拳喻，不會出現(xiàn)源文件的變化哭当，所以生產(chǎn)環(huán)境無須進(jìn)行自動(dòng)刷新和熱更新的配置
兩者都是用于開發(fā)環(huán)境
