Ich arbeite an einer React/Redox-App, die lokal mit einem npm-piped hapi.js Backend auf Port: 3000 und einem Webpack-Dev-Server ausgeführt wird Hafen: 3001;Dev-Server nicht hot-reloading, nicht bauen
Ich habe ein paar API-Routen auf der Rückseite, um statische Dateien zu liefern, und dann habe ich Asset-Dateien aus meinem Build/Public-Verzeichnis mit einer {param *} Regel getroffen. Um das zu machen, habe ich einen Proxy auf dem WebpackDevServer, der Anfragen zurück an Port: 3000
Ich habe CSSModules Durchführung einer Build von. scss, und es gibt ein paar andere Lader an Ort und Stelle.
Als ich das zuerst aufstellte, funktionierte es wie erwartet. Ich könnte Dateien hinzufügen, Inhalt speichern, den Build durchführen und das HMR würde sein Ding tun und das Dom aktualisieren. Hat super funktioniert. Irgendwann hörte das sehr gut auf. Die Back-End-on: 3000 A nicht wieder aufbauen und neu geladen, während das vordere Ende auf: 3001 wird eine Fehlerempfang etwa so:
[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)
merke ich, gibt es einen Verweis auf: 8080 in dort (der webpack-dev-Server Standard), aber meine Referenzen sind alle: 3000/1.
Wenn dieser Stack gut funktionierte - ich konnte die server.js speichern und der hapi Server würde sich selbst neu starten (wegen der npm-Pipeline), und der Webpack-Build würde wie erwartet laufen. Derzeit Build Fehler intermittierend von server.js, und ich bin manuell $ webpack und laden Sie den Browser neu, um den Build und erfolgreiche Aktualisierung auszulösen. Was offensichtlich den Punkt besiegt.
Die Wichtige Bits:
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);
mit allen Einstellungen worden bastelt, so könnte ich munged von dem, was hatte habe gearbeitet. Aber es scheint, dass dies wie erwartet funktionieren sollte.
Jeder Einblick in diesen Config-Stack wäre willkommen. Projekt Quelle: github
Best -