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' 。