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

javascript node.js webpack networking web-development-server

2022-08-30 02:12:26

有一些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

我可以在本地计算机上访问开发服务器，但我也希望从我的手机平板电脑（它们位于同一Wi-Fi网络中）访问我的服务器。http://localhost:8080

如何启用它？谢谢！

答案 1

（如果您使用的是像我这样的Mac和网络。

运行 webpack-dev-server — 这允许服务器侦听来自网络的请求，而不仅仅是 localhost。--host 0.0.0.0

在网络上查找计算机的地址。在终端中，键入并查找该部分或具有以下内容的部分ifconfigen1inet 192.168.1.111

在同一网络上的移动设备中，访问并享受热重装开发幸福。http://192.168.1.111:8080

答案 2

您可以直接在 webpack 配置文件中设置您的 IP 地址：

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}