通過 webpack 命令編譯源代碼時，如果我們對源代碼進行了修改，需要重新執行命令才能看到編譯後的效果。
這樣在開發中非常的影響效率，如果存在一種方式，當文件被修改時，webpack 自動監聽重新編譯，並反饋給開發者，這樣就能更高效的進行開發。
watch
我們通過 webpack 執行命令時，編譯完成之後進程會停止，而 webpack --watch 編譯完成後，不會停止進程，並且當文件內容發生更改時，將重新執行編譯操作。
在項目中有兩種配置方式
- package.json 中配置命令
- webpack.config.js 中配置參數
// package.json
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
},
// webpack.config.js
module.exports = {
watch: true,
};配置在 package.json 中通過 npm run watch 執行命令，實際上就是執行的 webpack --watch ，在 webpack.config.js 中配置 wath 參數，可以直接通過 npm run build 編譯
webpack-dev-server
通過 watch 命令，每一次重新編譯都會生成新的文件，包括 js、html、css、圖片資源，這樣效率不高，並且通過開啓服務，在瀏覽器中展示 html 頁面的方式每次都會刷新頁面。
可以通過 webpack-dev-server 解決以上問題，它每次編譯不會重新生成文件，而是將資源保存在內存中。
通過 npm install webpack-dev-server -D 安裝依賴，package.json 中配置
// package.json
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},npm run serve 執行命令，編譯完成後也不會終止進程，當文件更改後會再次重新編譯
此時會開啓一個服務，通過 http://localhost:8080/ 在瀏覽器中訪問
Hot Module Replace
目前為止，每次修改了文件，都會重新加載整個頁面，在開發時，隨着項目的增大，對所有頁面都重新加載耗時會越來越長，有時候只是對某些樣式做了修改，只更新修改的內容對開發而言更高效。
這時候我們就可以通過 Hot Module Replace （熱模塊替換）來實現，需要在 webpack.config.js 中開啓，以及需要使用 Hot Module Replace 的地方通過 module.hot.accept 引入。
// webpack.config.js
module.exports = {
devServer: {
hot: true,
},
};
// index.js
import './math';
if (module.hot) {
module.hot.accept('./math', () => {
console.log('math文件被修改了');
});
}當引入的 math.js 文件被修改時，執行修改的部分，以及修改後的回調函數。
hotOnly
當源代碼編譯出錯且被解決後，瀏覽器會被刷新，所有內容將重新加載。想要編譯錯誤也通過熱更新來處理，需要設置 hotOnly 屬性。
devServer: {
hot: true,
hotOnly: true,
}此時，當錯誤被修復時，只會更新修復的文件
compress
compress 屬性表示是否對編譯後資源壓縮，開啓後將採用 gzip 的壓縮方式，在響應頭標識 Content-Encoding，瀏覽器會自動解壓 gzip 文件
通過 compress: true 來開啓，bundle.js 文件由原來的367kb壓縮到93kb
proxy
比如本地項目運行在8000端口，訪問接口 http://localhost:9000/math，會報錯跨域
當項目開發時，接口請求存在跨域情況時，可通過 devServer 中的 proxy 屬性配置代理解決，發送請求時直接使用 /api 來替代 http://localhost:9000/
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:9000/',
},
},
},
};通過 fetch 發送網絡請求
const url = '/api/math';
fetch(url)
.then((res) => {
console.log('then', res);
return res.text();
})
.then((res) => {
console.log('res', res);
});請求成功並獲取響應，但此時我們發現請求url地址多了個 "/api"，以及請求源地址還是 8000端口
可以通過 pathRewrite 屬性替換 /api，以及 changOrigin 修改請求host屬性
其它參數
- host 設置主機地址
- port 設置端口
- open 編譯後是否自動打開瀏覽器
- publicPath 指定 index.html 文件打包引用的基本路徑
- contentBase 為引入的靜態資源提供服務（默認值指向當前目錄的路徑）
- watchContentBase 當引用的靜態資源發生變化時，是否刷新瀏覽器
整合以上 devServer 的配置
module.exports = {
devServer: {
hot: true,
contentBase: path.resolve(__dirname, './public'),
watchContentBase: true,
hotOnly: true,
port: 8000,
open: true,
compress: true,
proxy: {
'/api': {
target: 'http://localhost:9000/',
pathRewrite: {
'/api': '',
},
changeOrigin: true,
},
},
},
};配置好 devServer 的屬性，可以讓我們的開發變得更高效~
以上就是 webpack dev server 與 hot module replace 相關的總結， 更多有關webpack的內容可以參考我其它的博文，持續更新中~
