簡述

開發中會頻繁的手動構建和重新整理頁面，十分繁瑣
這些功能我們完全可以使用webpack-dev-server外掛來代替實現

作用

1. 使用node(express)建立服務，掛載打包檔案，可以使得我們在瀏覽器上直接預覽，（打包後的檔案直接存放在記憶體中，不會生成檔案，當然我們可以在頁面上檢視）
2. 監聽檔案修改，儲存時，自動重新構建（當然不是所有檔案都重新構建，還有快取，速度更快）
3. 自動開啟瀏覽器、自動重新整理頁面、壓縮打包檔案
4. 設定代理、埠號
5. 實現跨域請求
   ...

安裝

• 除了在webpack.config.js檔案中新增配置devServer配置外，還需要安裝對應的外掛 webpack-dev-server

$ npm i -D webpack-dev-server

devServer配置（參考）

• 在webpack.config.js檔案中新增配置

devServer: { // 搭配 webpack-dev-server 使用
    //專案構建後的路徑
    contentBase: resolve(__dirname, 'build'),
    // 啟動gzip壓縮
    compress: true,
    port: 3000, //埠號
    open: true, //自動開啟瀏覽器
    host: '0.0.0.0',
    disableHostCheck: true, // 繞過主機檢查
    allowedHosts: // 使用localhost 127.0.0.1 預設可以訪問
        'host.com', // 通過此選項，您可以將允許訪問開發伺服器的服務列入白名單。
    ]
    proxy: { // 代理指定url (要避開代理 devSever 與 瀏覽器的請求)
        '/api': {
            target:"http://localhost:8088",
            ws: true,
            changeOrigin: true
        }
    }
}
 

列印資訊說明

i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\workpace\node\my\xxx-webpack\build
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: 25232777f205d4e12044
... 省略（參考打包資訊說明）

• 第一行： 說明建立的服務地址
• 第二行： 說明生成的打包檔案所掛載的目錄（路由）
• 第三行： 說明生成的打包檔案所掛載到伺服器的路徑
• 第五行： 說明本次打包Hash值

參考

webpack devServer: http://webpack.html.cn/configuration/dev-server.html