一、webpack-dev-server的使用
使用原因:因爲每次修改代碼後，都要使用webpack進行打包，所以使用webpack-dev-server這個工具可以
自動檢測代碼進行構建
1.安裝方式: npm i webpack-dev-server -D 把這個工具安裝在本地項目開發依賴中
2.安裝完畢後，這個工具的用法和webpack命令的用法是完全一樣的
3.由於我們是在項目本地安裝的webpack-dev-server所以我們沒辦法把它當做一個腳本在終端運行
只有全局安裝的 使用了 -g 的才能在終端正常運行
4.注意: webpack-dev-server 這個工具如果要正常運行，必須要在本地上安裝webpack纔可以。
5.在 package.json 中找到 scripts標籤 配置 如下
6.在終端使用 npm run dev
注意使用 webpack-server-dev 這個工具後 再用 npm run dev 的時候這個時候就不能再使用物理磁盤上的根路徑了
要使用服務器上 localhost:8080/bundle.js
7、使用webpack-dev-server 這個工具後，幫我們打包生成的bundle.js文件並沒有存放在實際物理磁盤上。
而是直接託管到電腦的內存中去了。所以我們在項目的根目錄下面根本找不到bundle.js文件。
8、我們可以認爲 webpack-dev-server 把打包好的的文件以一種虛擬的形式，託管到我們的項目中的跟目錄下
雖然我們看不見，但是這個bundle.js是和dist src node_modules是平級的。
二、webpack-dev-server基本命令
配置 --open 後回自動打開默認的瀏覽器
配置 --port 3000 表示默認打開端口是 3000
配置 --contentBase src 表示默認打開src 中的 也就是首頁
配置 --hot 就是熱重載 熱更新 可以減少不必要的代碼更新，可以實現瀏覽器的無刷新改變
第二種方式配置就是一個個的寫上去:有點麻煩
三、html-webpack-plugin插件的使用
作用:將html文件也存放在內存中去
安裝命令:npm i html-webpack-plugin
在webpack.config.js中導入這個插件
const htmlWebpackPlugin = require('html-webpack-plugin')
再配置插件節點
//這個插件的兩個作用:
// 1.自動在內存中根據頁面生成一個內存的頁面
// 2.自動把打包好的bundle.js自動追加到頁面中去