webpack-dev-server: Can not access webpacl-dev-server through LAN?
I using webpack-dev-server
for developing,
and I wanted to test some page in my mobile phone which connect to the same wifi with my laptop.
but I can not access in my mobile phone.
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var I18nPlugin = require('i18n-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var languages = {
'en_US': null,
'zh_CN': require('./js/i18n/zh_CN.json'),
'vi_VN': require('./js/i18n/vi_VN.json')
};
module.exports = Object.keys(languages).map(function(language) {
return {
name: language,
entry: [
'webpack-dev-server/client?http://localhost:3333',
'webpack/hot/dev-server',
'./js/app.js'
],
output: {
path: path.join(__dirname, 'build'),
filename: language + '.bundle.js',
publicPath: '/build/'
},
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', {
publicPath: './'
})
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.(ttf|eot|svg|woff(2)?)(\?v=[\d.]+)?(\?[a-z0-9#-]+)?$/,
loader: 'file-loader'
}, {
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]
},
plugins: [
// new webpack.optimize.UglifyJsPlugin(),
new I18nPlugin(
languages[language]
),
new ExtractTextPlugin('bundle.css'),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
});
server.js (config for webpack dev server)
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var PORT = 3333;
new WebpackDevServer(webpack(config), {
publicPath: '/build/',
hot: true,
historyApiFallback: true,
stats: { colors: true }
}).listen(PORT, 'localhost', function(err) {
if (err) {
console.log(err);
}
console.log(':::Server Running::: ==> localhost:' + PORT);
});
open localhost in my laptop
but I can not open http://[my-laptop-ip]:3333 in my mobile phone
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 8
- Comments: 19 (1 by maintainers)
Damn, i had achieve that by set --host 0.0.0.0! Thank you btw)
@littlee
--host xxx.xxx.xxx.xxx
will fix it.@mkarajohn I couldn’t stop cursing the sucking configuration of webpack, I spent all the afternoont to find that there is no good way to solve this problem, fuck…
Just add this after proxy:
*Don’t forget to replace
xxx
to your LAN ipIn case you get some 404’s in your browser when trying to access from LAN IP, make sure to remove the
publicPath
setting, or at least not hardcode it tolocalhost
or an IP, as it will break resource loading.As I am using DHCP, is there a way to specify the
--host
IP address dynamically?I set it like this:
You probably don’t need the inline and content-base options.
In my
package.json
set up a command that I run withnpm run dev
:@joetidee you can use
--host 0.0.0.0
. From Wikipedia: In the context of servers, 0.0.0.0 can mean “all IPv4 addresses on the local machine”. If you try to access your dev server via hostname (e.g.myDevServerMachine:8080
) and get theInvalid Host header
error, you have to set theallowedHosts
option or set thedisableHostCheck
option totrue
(read the docs before doing so though).With
allowedhosts
:webpack-dev-server --host 0.0.0.0 --allowed-hosts myDevServerMachine
With
disableHostCheck
:webpack-dev-server --host 0.0.0.0 --disable-host-check
Oh, git it.
You need to replace
localhost
to your ip.Using --open works perfectly with this config.
npm start
will use the correct ip and port and will open the app correctlyIs there a way to have this work with
--open
as well?If I do
--host 0.0.0.0 --open
the browser opens at 0.0.0.0 which is not what we want.If I do
--host 0.0.0.0 --public localhost --open
the browser opens at localhost which is not what we want, because there is no port specifiedIf I do
--host 0.0.0.0 --public localhost:8080 --open
the browser opens at localhost:8080 which is not ideal, because I may have another local server running at 8080 at that moment.So, ideally, is there a way to have this work with
--open
while also automatically opening it on localhost on the correct port?