有一些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网络中)访问我的服务器。
我如何启用它?谢谢!
发布于 2016-02-16 05:42:27
(如果您使用的是像我这样的Mac和网络)。
使用--host 0.0.0.0
运行webpack-dev-server -这会让服务器监听来自网络的请求,而不仅仅是本地主机。
在网络上查找您的计算机地址。在终端中,键入ifconfig
并查找en1
部分或包含类似inet 192.168.1.111
的内容的部分
在同一网络上的移动设备中,访问http://192.168.1.111:8080
并享受热重新加载开发的极乐。
发布于 2018-03-16 22:54:28
您可以直接在webpack配置文件中设置您的ip地址:
devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
disableHostCheck: true,
...
}
发布于 2017-07-10 22:15:22
对我来说,最终起到帮助作用的是将以下内容添加到webpack-dev-server配置中:
new webpackDev(webpack(config), {
public: require('os').hostname().toLowerCase() + ':3000'
...
})
然后还更改了巴别塔的webpack.config.js文件:
module.exports = {
entry: [
'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
...
]
...
}
现在只需获取您的计算机主机名(在OSX终端上为hostname
),添加您定义的端口,就可以在移动设备上运行了。
与ngrok.io相比,这个解决方案还可以让你在移动端使用react的热重载模块。
https://stackoverflow.com/questions/35412137
复制相似问题