webpack-dev-server的使用及說明

webpack-dev-server這個工具不僅能幫我們打包，還能幫我們起了服務器。還能幫我們自動打開瀏覽器，還能自動更新，可謂好處多多（嘿嘿）

具體功能：1.打包

　　　　　2.開啟一個服務器

　　　　　3.實時的自動編譯代碼，只要我們對源代碼做了保存（ctrl+s）

　　　　　4.webpack-dev-server打包過后生成的bundle.js，不在我們配置的./dist目錄下。而是一個暫存在內存中並且被認為是當前網站根目錄下（這就需要注意一下將引入的包的目錄改成根目錄）

安裝步驟：

首先在終端安裝，輸入命令：npm i webpack-dev-server -D

（因為這是在我們當前項目里的命令，可能在其他項目里不用，所以不用-g(全局安裝),所以需要進行本地安裝，本地安裝有兩類，-S（運行時依賴）,-D（開發時依賴），在這里我們用-D，開發時的依賴。）

安裝完以后可以看到：

 

 

 

（dependencies配置節底下，記錄的是-S安裝的包，當運行webpack命令的時候，都會打包到bundle.js里面

反之，devDependencies配置節底下，記錄的是-D安裝的包，當運行webpack命令的時候，不會打包到bundle.js里面）

webpack-dev-server它內部依賴本地安裝的webpack包，就是說，如果想用這個工具，就必須在這個項目里本地安裝webpack，所以我們需要再裝一下

輸入命令： npm i webpack -D

然后他就會在devDependencies多一項

如圖所示：

接下來需要在package.json里配置一下

 

 

配置的解釋：

 --open  表示自動打開瀏覽器

--port 8088  設置端口號，這個想用什么就可以用什么（80端口除外，它不能隨意占用）

--contentBase src  把src目錄設定為被webpack-dev-server服務器直接托管的目錄

最后運行命令  npm run dev2