webpack插件之webpack-dev-server

webpack插件  自動化  webpack-dev-server 

現在只需要使用 npm run build指令就可以自動打包，並自動處理好各種依賴關系，但還是存在一個問題，

如果對js文件的代碼進行了修改，又要重新打包才能測試，很明顯又要手動操作

---

在開發測試過程中，我們會經常修改代碼后，然后頻繁刷新頁面查看效果.對於我們前端仔來說，每次修改代碼后都需要重新編譯才能測試。這個過程非常繁瑣，這簡直是個深坑，不能忍啊。使用webpack-dev-server插件，搭建本地服務器，監聽入口文件和其它被它引用（導入）的文件，只要我們對文件進行修改后，就重新編譯,並通知瀏覽器自動刷新顯示我們修改后的結果。

webpack-dev-server插件使用流程:

1.安裝 webpack-dev-server
npm i --save-dev webpack-dev-server

2.安裝完成后該服務器並不會立刻生效，需要修改下webpack.config.js，添加devServer屬性。

添加devServer屬性

■devserver雖然是webpack中的一個屬性，但它本身也是個對象，也有它自己的成員屬性：
口contentBase：靜態資源目錄 ，我們這里要填寫，/dist
口inline：頁面實時刷新

3.由於webpack-dev-server不是全局安裝的，不能直接在控制台/終端使用指令【無法把它當作腳本命令，在powershe;;終端中使用。只有那些安裝到全局-g的工具，才能在終端中正常執行】，此時我們還需要在package.js的scripts字段內配置相應的指令。由於是開發時編譯，而不是打包，在script字段后添加=="dev": "webpack-dev-server"==,

npm run dev

4.在控制台輸入npm run dev啟動本地服務器，點擊打開該url就能看到效果。

輸入npm run dev就跑在8080端口，點擊打開該url,

5.當項目內資源發生改變時，就會自動編譯。如果想修改並編譯后無非點擊上述url,需要配置package.js內的devServer參數。需要注意的時，編譯后的文件並不會在磁盤生成。

只要修改了項目的內容，就自動編譯

如果想編譯成功后，自動打開瀏覽器，給dev屬性添加--open參數