Como obter acesso ao webpack-dev-server de dispositivos na rede local?

Há alguma configuração de servidor de desenvolvimento de webpack (faz parte de toda a configuração):

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);
  };
}

Eu executo o webpack com o seguinte comando:

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

Posso obter acesso ao servidor de desenvolvimento usando http://localhost:8080na minha máquina local, mas também quero obter acesso ao meu servidor a partir do meu celular ou tablet (eles estão na mesma rede Wi-Fi).

Como posso habilitá-lo? Obrigado!

(Se você estiver em um Mac e uma rede como a minha.)

Execute webpack-dev-server com --host 0.0.0.0- isso permite que o servidor escute solicitações da rede, não apenas localhost.

Encontre o endereço do seu computador na rede. No terminal, digite ifconfige procure a en1seção ou com algo comoinet 192.168.1.111

No seu dispositivo móvel na mesma rede, visite http://192.168.1.111:8080e desfrute de recarregamento quente do dev bliss.

Você pode definir seu endereço IP diretamente no arquivo de configuração do webpack:

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

Pode não ser a solução perfeita, mas acho que você pode usar o ngrok para isso. O Ngrok pode ajudá-lo a expor um servidor Web local à Internet. Você pode apontar o ngrok para o servidor de desenvolvimento local e configurar o aplicativo para usar a URL do ngrok.

Por exemplo, suponha que seu servidor esteja executando na porta 8080 . Você pode usar o ngrok para expor isso ao mundo exterior executando

./ngrok http 8080

O bom ngrokdisso é que ele fornece uma versão https mais segura da url exposta, que você fornece a qualquer outra pessoa no mundo para testar ou mostrar seu trabalho.

Também possui várias opções de personalização disponíveis no comando, como definir um nome de host amigável ao usuário em vez de uma string aleatória na url exposta e muitas outras coisas.

Se você deseja apenas abrir seu site para verificar a capacidade de resposta móvel, você deve ir para o browersync .

Para mim, o que acabou ajudando foi adicionar isso à configuração do webpack-dev-server:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

e também alterando o arquivo webpack.config.js do babel:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

Agora é só pegar o nome do host do seu computador ( hostnameno terminal OSX), adicionar a porta que você definiu e você está pronto para usar o celular.

Comparado ao ngrok.io, esta solução também permitirá que você use o módulo de recarga a quente do react no celular.

Não pude comentar a fim de adicionar informações adicionais à resposta de forresto, mas aqui no futuro (2019) você precisará adicionar um --publicsinalizador devido a uma vulnerabilidade de segurança com --host 0.0.0.0sozinho. Confira este comentário para mais detalhes.

A fim de evitar "responder a outras respostas" como uma resposta, aqui está o conselho de forresto, mais os detalhes adicionais de que você precisará para fazer este trabalho:

Adicione ambos:

--host 0.0.0.0

e

--public <your-host>:<port>

onde seu-host é o nome do host (para mim é (nome) s-macbook-pro.local)) e porta é qualquer porta que você está tentando acessar (novamente, para mim é 8081).

Então, aqui está a aparência do meu package.json:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },