javascript - 如何从本地网络中的设备访问 webpack-dev-server？

Question

有一些 webpack 开发服务器配置(它是整个配置的一部分):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

我使用以下命令执行 webpack:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

我可以在本地机器上使用 http://localhost:8080 访问开发服务器，但我也想通过手机、平板电脑访问我的服务器(它们位于相同的 Wi-Fi 网络)。

如何启用它？谢谢!

Answer 1

(如果您使用的是 Mac 和像我一样的网络。)

使用 --host 0.0.0.0 运行 webpack-dev-server — 这让服务器可以监听来自网络的请求，而不仅仅是 localhost。

在网络上查找您的计算机地址。在终端中，输入 ifconfig 并查找 en1 部分或类似 inet 192.168.1.111

的部分

在同一网络的移动设备上，访问http://192.168.1.111:8080，享受热重载开发的快乐。