Получение горячего обновления веб-пакета для корректной работы в моем изоморфном веб-приложении
Я создаю веб-приложение с бэкэндом узла / экспресса и интерфейсом реакции. Я получил (я думаю) большую часть его и работает, но последний шаг, чтобы браузер выполнил горячее обновление, работает не так, как задумано. Я постараюсь опубликовать все соответствующие настройки здесь. Пожалуйста, дайте мне знать, если вам потребуется что-то еще, чтобы узнать, где я совершил ошибку:
Я запускаю свою заявку сnode ./server/index.js
webpack.config.js var path = require ('path'); var webpack = require ('webpack');
let webpackConfig = {
name: 'server',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
},
resolve: {
extensions: [
'', '.js', '.jsx', '.json'
]
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['es2015', 'react', 'stage-2']
}
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
entry: [
'webpack-hot-middleware/client',
'./app/client/client.jsx'
],
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
export default webpackConfig;
index.js просто включите «babel-register» и «server.js»
Сервер / server.js импортировать webpack из 'webpack'; импортировать webpackConfig из '../webpack.config'; импортировать webpackDevMiddleware из «webpack-dev-middleware»; импортировать webpackHotMiddleware из «webpack-hot-middleware»;
import express from 'express';
const app = express();
const renderPage = () => {
return `
<!doctype html>
<html>
<head>
<title>Brewing Day</title>
<meta charset='utf-8'>
</head>
<body>
<h1>Hello from server.js!!</h1>
<div id='root'></div>
<script src='/dist/bundle.js'></script>
</body>
</html>
`;
};
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath })
);
app.use(webpackHotMiddleware(compiler));
app.use((req, res, next) => {
res.status(200).end(renderPage());
});
const server = app.listen(3005, () => {
const host = server.address().address;
const port = server.address().port;
console.log(`Listening at http://${host}:${port}`);
})
export default server;
А такжеприложение / клиент / client.jsx это точка входа в конфигурации веб-пакета:
import React from 'react';
import ReactDOM from 'react-dom';
import Application from '../components/application.jsx';
window.addEventListener('load', () => {
ReactDOM.render(<Application />, document.getElementById('root')
);
});
В консоли, когда я запускаю ее, она отображает следующую строку:
webpack built cc1194a11614a3ba54a3 in 730ms
Когда я делаю изменение, например,client.jsx или жеapplication.jsx который содержит компонент rect, я получаю две новые строки в моей консоли:
webpack building...
webpack built 8d340a8853d3cfe9478d in 195ms
Все идет нормально!
Однако в браузере он не обновляется и выдает следующее предупреждение в консоли:
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.
[HMR] - ./app/components/application.jsx
Я попробовал случайно добавитьmodule.hot.accept() вapplication.jsx, Это избавляет от предупреждений, но все равно не обновляет без нажатия F5 и перезагрузки браузера.
Есть идеи, что мне здесь не хватает? Я видел другой пример, почти такой же, как у меня, где это работает без каких-либоmodule.hot.accept() звонки куда угодно, но я не вижу, где мои настройки отличаются от других настроек.
Любая помощь будет оценена.