How to get access to webpack-dev-server from devic

问题:

There is some webpack dev server config (it's part of the whole config):

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

I execute webpack with the following command:

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

I can get access to dev server using http://localhost:8080 on my local machine, but I also want to get access to my server from my mobile, tablet (they are in the same Wi-Fi network).

How can I enable it? Thanks!

回答1:

(If you're on a Mac and network like mine.)

Run webpack-dev-server with --host 0.0.0.0 — this lets the server listen for requests from the network, not just localhost.

Find your computer's address on the network. In terminal, type ifconfig and look for the en1 section or the one with something like inet 192.168.1.111

In your mobile device on the same network, visit http://192.168.1.111:8080 and enjoy hot reloading dev bliss.

回答2:

You can set your ip address directly in webpack config file:

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

回答3:

It may not be the perfect solution but I think you can use ngrok for this. Ngrok can help you expose a local web server to the internet. You can point ngrok at your local dev server and then configure your app to use the ngrok URL.

e.g Suppose your server is running on port 8080. You can use ngrok to expose that to outer world via running

./ngrok http 8080

Good thing about ngrok is that it provides a more secure https version of exposed url which you give to any other person in the world to test or show your work.

Also it has lots of customization available in the command such as set a user friendly hostname instead of random string in the exposed url and lots of other thing.

If you just want to open your website to check mobile responsiveness you should go for browersync.

回答4:

For me, what helped eventually was adding this to the webpack-dev-server config:

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

and then also changing babel's webpack.config.js file:

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

Now just get your computer hostname (hostname on OSX's terminal), add the port you defined, and you're good to go on mobile.

Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.

回答5:

I could not comment in order to add additional information to forresto's answer, but here in the future (2019) you'll need to add a --public flag due to a security vulnerability with --host 0.0.0.0 alone. Check out this comment for more details.

In order to avoid "responding to other answers" as an answer here's forresto's advice plus the additional details you'll need to make this work:

Add both:

--host 0.0.0.0

and

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

where your-host is the hostname (for me it is (name)s-macbook-pro.local)) and port is whatever port you're trying to access (again, for me it's 8081).

So here's what my package.json looks like:

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