webpack に友達になるチャンスを与えようとするたびに、webpack で問題が発生します。今回は、react-hot-loader、webpack、webpack-dev-server で Hot Module Reloading を有効にしようとしていますが、webpack-dev-server がブラウザで間違った URL を取得しようとしているようです。
これは、Chrome v50 のコンソールからのエラーです。
GET http://public/info?t=1464117419740 net::ERR_NAME_NOT_RESOLVED
完全なログ:
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
これが私のwebpack構成です:
{
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'
}
]
}
}