webpack-dev-server配置host為WLAN位址（用于移動端調試）

目錄

前言

二、操作步驟

1.引入擷取NetworkIP位址js的檔案

2.修改devServer配置

補充

總結

前言

        vue-cli和react-cli都為我們配置了Network，當我們的電腦連接配接了手機的WLAN我們就可以在手機通過 WLAN的位址加端口号 去通路本地項目以用于調試了！但是如果我們不使用這些架構的腳手架而是單純用webpack去開發項目那麼就需要自己去配置Network來用于真機調試。

        接下來配置Network。

二、操作步驟

1.引入擷取NetworkIP位址js的檔案

        在項目根目錄下建立 getNetworkIp.js 檔案，名字可以自定義。

/*
    getNetworkIp.js
    用于擷取WLAN位址
*/
const os = require('os');
 
function getNetworkIp() {
  let needHost = ''; // 打開的host
  try {
    // 獲得網絡接口清單
    let network = os.networkInterfaces();
    // 擷取WLAN的接口
    let alias = network['WLAN'];
    console.log(network['WLAN']);
    for (let i = 0; i < alias.length; i++) {
      // 擷取IPv4的位址
      if (alias[i]['family'] === 'IPv4' && alias[i]['address'] !== '127.0.0.1' && !alias[i]['internal']) {
        needHost = alias[i]['address'];
      }
    }
  } catch (e) {
    needHost = 'localhost';
  }
  return needHost;
}

module.exports = getNetworkIp
           

2.修改devServer配置

        把 getNetworkIp.js 檔案引入到 webpack.config.js，在 webpack.config.js 檔案中修改 devServer 選項中的 host。

/*
    webpack.config.js
*/

/*
    此處省略了一些引入檔案文法，引入getNetworkIp.js檔案
*/
const getNetworkIp = require('./getNetworkIp');

module.exports = {
    /*
        此處省略了一些配置選項，讀者隻需關注devServer選項即可
    */
    devServer: {
        compress: true,
        port: 8001,
        // 修改host為getNetworkIp()
        host: getNetworkIp(),
        open: true,
        hot: true,
        https: true
    }
}
           

        此時在指令行敲下npm run dev（請自行在package.json的script配置）啟動服務，即可使用 WLAN 位址加端口号通路網頁了！

補充

        此外，配置 devServer.host = '0.0.0.0'（'0.0.0.0'可以表示所有網絡位址） 也是可以使用 WLAN 位址加端口号進行網頁通路的。但是如果不想在cmd輸入ipconfig去檢視WLAN位址再手動輸入的話那麼配置全0位址則不是一個很好的選擇了。

總結

1. 在根目錄添加 getNetworkIp.js 檔案。
2. 在webpack.config.js引入該檔案并在devServer的host屬性上調用。
3. 除了以上方法的配置外還可以直接配置  devServer.host = '0.0.0.0' 。