我目前正在使用以下配置文件从React
运行我的webpack-dev-server
应用程序:
// webpack.config.js
/* eslint no-var: 0 */
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
'controller-bundle': path.resolve(__dirname, './src/js/sym-controller.js'),
'app-bundle': path.resolve(__dirname, './src/js/sym-app.js'),
bundle: path.resolve(__dirname, './src/js/index.js')
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('style.css'),
new HtmlWebpackPlugin({
template: './src/html/controller.html',
filename: 'controller.html',
chunks: ['controller-page']
}),
new HtmlWebpackPlugin({
template: './src/html/app.html',
filename: 'app.html',
chunks: ['app-page']
})
],
module: {
loaders: [
{
test: /\.js(x)?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
devServer: {
contentBase: path.resolve(__dirname, './dist'),
host: '0.0.0.0',
port: 4000,
https: true,
headers: {
'Access-Control-Allow-Origin': '*'
}
}
}
我遇到的问题是,当https
的{{1}}标记设置为WDS
时,应用程序会不断抛出错误:
true
并立即刷新页面。 (也许一两秒钟)
当[WDS] Disconnected!
设置为https
时,这不会发生,但我需要应用程序在false
上运行。我已经在https
的github问题部分看到这是一个问题,但似乎无法找到一个明确,直接的答案,因为它发生的原因以及如何解决它。
我最常见的解释是,由于websockets和开发服务器本身之间的不匹配或不完全握手。如果我能够使用它来解决问题,我可以从节点模块包中提取dev-server的webpack
文件。
通过使用server.pem
安装到自签名express
服务器暂时解决,但我仍然希望完全解决webpack-dev-middleware
问题。
答案 0 :(得分:0)
我遇到了与codenvy cloud ide相似的问题。
尝试提供一个公共选项,其主机名暴露给外部env,例如:
webpack-dev-server --config=config/webpack.dev.js --public node10.codenvy.io:3000
上述更改帮助我解决了热重载问题。