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.xxxwill 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
xxxto your LAN ipIn case you get some 404’s in your browser when trying to access from LAN IP, make sure to remove the
publicPathsetting, or at least not hardcode it tolocalhostor an IP, as it will break resource loading.As I am using DHCP, is there a way to specify the
--hostIP address dynamically?I set it like this:
You probably don’t need the inline and content-base options.
In my
package.jsonset 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 headererror, you have to set theallowedHostsoption or set thedisableHostCheckoption totrue(read the docs before doing so though).With
allowedhosts:webpack-dev-server --host 0.0.0.0 --allowed-hosts myDevServerMachineWith
disableHostCheck:webpack-dev-server --host 0.0.0.0 --disable-host-checkOh, git it.
You need to replace
localhostto your ip.Using --open works perfectly with this config.
npm startwill use the correct ip and port and will open the app correctlyIs there a way to have this work with
--openas well?If I do
--host 0.0.0.0 --openthe browser opens at 0.0.0.0 which is not what we want.If I do
--host 0.0.0.0 --public localhost --openthe 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 --openthe 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
--openwhile also automatically opening it on localhost on the correct port?