1
// 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': '*'
}
}
}
私はに実行している問題はWDSためhttpsフラグがに設定されているということですtrue、アプリケーションが継続的にエラーがスローされます：
[WDS] Disconnected!
、すぐにはページを更新。 （多分1秒に1,2回）
httpsがfalseに設定されている場合、これは起こりませんが、httpsを実行するアプリケーションが必要です。私はwebpackのgithub issueセクションの問題としてこれを見てきましたが、なぜこれが起こっているのか、それを修正する方法として明確で、真っ直ぐな答えが見つからないようです。
私が説明したところで最も近いのは、ウェブソケットと開発者自身の間の不一致または不完全なハンドシェイクによるものです。私が問題を解決するためにそれを使用できる場合、私はdev-serverのserver.pemファイルをノードモジュールパッケージから抽出しました。
更新：
一時的にしかし私はまだ単にdev-serverを使用しての問題のように完全に解決されるだろう、webpack-dev-middlewareを使用して自己署名expressサーバにマウントすることで解決。