webpack 熱加載

WebpackDevServer

每次的代碼修改都需要重新編譯打包，刷新瀏覽器，特別麻煩，我們可以通過安裝 webpackDevServer 來改善這方面的體驗
安裝指令

npm install --save-dev webpack-dev-server

啓動命令：

npx webpack-dev-server

或者，package.json 中添加 scripts，點擊運行腳本即可

"scripts": {
  "server": "webpack-dev-server"
}

修改 webpack.config.js

module.exports = {
  ...,
  devServer: {
  	// 生成的虛擬目錄路徑
  	contentBase: "./dist",
  	// 自動開啓瀏覽器
  	open: true,
  	// 端口
  	port: 8081
	}
}

啓動服務以後，webpack 不在會把打包後的文件生成到硬盤真實目錄中了，而是直接存在了內存中(同時虛擬了一個存放目錄路徑)，後期更新編譯打包和訪問速度大大提升