私はreact/reduxアプリケーションで作業しています。ポート：3000にnpmパイプのhapi.jsバックエンドをローカルで提供し、webpack-dev-serverはポート：3001;デッドサーバがホットリロードしていない、ビルドに失敗している
静的なファイルを提供するためにいくつかのAPIルートがあります。そして、ビルド/パブリックディレクトリから{param *}ルールでアセットファイルを読み込みます。その作業を行うために、WebpackDevServerのプロキシを使用して、要求をポートに転送します。3000
私はCSSModulesビルドを実行しています。 scssがあり、他に2つのローダーがあります。
これを最初に設定したとき、期待通りに機能しました。私はファイルを追加したり、コンテンツを保存したり、ビルドを実行したり、HMRがそのことを行い、DOMを更新することができます。素晴らしい仕事をした。ある時点で、これは非常にうまく機能しなくなりました。私は参照ある気づく
[HMR] Checking for updates on the server...
bundle.js:26 GET http://localhost:3001/dist/ee2fe9b049ee40ff922c.hot-update.json 404 (Not Found)hotDownloadManifest @ bundle.js:26hotCheck @ bundle.js:245check @ bundle.js:8080(anonymous function) @ bundle.js:8138
bundle.js:8095 [HMR] Cannot find update. Need to do a full reload!
bundle.js:8096 [HMR] (Probably because of restarting the webpack-dev-server)
：3001そうようなエラー受信している：上のバックエンド：フロントエンドはながら3000は、再構築および再ロードんそこに8080（WebPACKの-DEV-サーバ私の参照はすべて3000/1です。
このスタックが正常に動作していたときに、server.jsを保存できたため、hapiサーバーが再起動して（npm配管のため）、webpackビルドが正常に行われました。現在、のビルドはserver.jsから間欠的にに失敗しています。私は手動で$ webpackを実行し、ビルドを開始してリフレッシュを成功させるためにブラウザをリロードする必要があります。明らかにその点を打破している。
重要なビット：
server.js
// ... hapi.js settings
// Dev server/HMR
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../webpack.config.js');
if (!isProduction){
new WebpackDevServer(webpack(config), {
publicPath: 'dist',
hot: true,
historyApiFallback: true,
proxy: {
"*": 'http://localhost:3000'
},
quiet: false,
stats: { colors: true }
}).listen(3001, 'localhost', (err, result) => {
if (err){
console.log(err);
}
console.log('WebpackDevServer[localhost::3001]');
});
}
webpack.config.js
// imports
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const validate = require('webpack-validator');
const path = require('path');
// paths
const rootPath = path.resolve(__dirname, 'client', 'src');
// configger the almighty webpack
const config = {
entry: [
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
path.resolve(rootPath, 'index.jsx')
],
resolve: {
extensions: ['', '.js', '.jsx'],
root: rootPath
},
output: {
path: path.resolve(__dirname, 'public', 'dist'),
publicPath: '/dist/',
filename: 'bundle.js',
sourceMapFilename: 'bundle.map'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'react-hot!babel',
include: rootPath
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'),
include: rootPath
}, {
test: /\.(png|jpg|gif)$/,
loader: 'file?name=/images/[name].[ext]',
include: rootPath
}
]
},
devtool: '#source-map',
devServer: {
contentBase: '/public',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles.css')
]
};
module.exports = validate(config);
は、すべての設定をいじりされて、私は持っていたものマングドのかもしれません働いていた。しかし、これは期待どおり機能しているはずです。
この設定スタックについての洞察は高く評価されます。 プロジェクトソース：ベストgithub
-