webpack之調試工具devServer（webpack-dev-server）的使用和配置

簡述

開發中會頻繁的手動構建和刷新頁面，十分繁瑣
這些功能我們完全可以使用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