[toc]
# devServer
## 快速啟動
每次修改代碼都需要重新打包比較麻煩。
我們可以安裝一個開發服務器，這樣在每次修改代碼之后會自動重新打包并刷新頁面。
1. 安裝
~~~
npm i -D webpack-dev-server
~~~
2. 配置開啟
添加配置：
~~~
devServer: {
contentBase: './dist'
}
~~~
3. 修改 package.json 中的 scripts
~~~
"scripts": {
"dev": "webpack server --open"
}
~~~
注意，修改 webpack 的配置文件是不會重新打包的，需要手動重新啟動。
## HMR
HMR（熱模塊替換）。在開發時只更新修改過的模塊，而無需完全更新。
配置中添加 `hot` 即可：
~~~
devServer: {
contentBase: './dist',
hot: true
}
~~~
## 代理
~~~
devServer: {
open: false, // 自動啟動瀏覽器
host: '0.0.0.0', // localhost
port: 6060, // 端口號
hotOnly: false, // 熱更新
overlay: {
// 當出現編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋層
warnings: false,
errors: true
},
proxy: {
//配置跨域
'/api': {
target: 'https://www.test.com', // 接口的域名
// ws: true, // 是否啟用websockets
changOrigin: true, // 開啟代理，在本地創建一個虛擬服務端
pathRewrite: {
'^/api': '/'
}
}
}
}
~~~
