I'm having trouble with webpack every time i'm trying to give it a chance to be my friend! This time I'm trying to enable Hot Module Reloading with react-hot-loader, webpack & webpack-dev-server but it seems webpack-dev-server is trying to fetch a wrong url in browser.
This is the error from Chrome v50's console:
GET http://public/info?t=1464117419740 net::ERR_NAME_NOT_RESOLVED
complete log:
abstract-xhr.js:132 GET http://public/info?t=1464117419740 net::ERR_NAME_NOT_RESOLVEDAbstractXHRObject._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21
index.js:70 [WDS] Disconnected!sock.onclose @ index.js:70EventTarget.dispatchEvent @ eventtarget.js:51(anonymous function) @ main.js:356
abstract-xhr.js:132 GET http://public/info?t=1464117421752 net::ERR_NAME_NOT_RESOLVEDAbstractXHRObject._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21
Here is my webpack config:
{
devtool: 'source-map',
entry: [
// 'webpack-dev-server/client?path=http://localhost:3001/', // I have tested it with no luck
'webpack-hot-middleware/client?path=http://localhost:3001/',
'webpack/hot/dev-server',
'./index.js'
],
output: {
path: path.join(__dirname, 'public'),
publicPath: '/public/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('index.css', {
allChunks: true
})
],
postcss: [
values,
cssnext
],
devServer: {
hot: true,
inline: true,
contentBase: './'
}
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot','babel'],
exclude: /node_modules/
},
{
test: /\.(css)$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss')
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
loader: 'file'
}
]
}
}
It's on the webpack-dev-server/client entry point, and it's just the path in the querystring, no parameter name.
webpack-dev-server/client?http://localhost:3001