Я использую веб-сайт ASP.NET Core с интерфейсом React, написанным на TypeScript. Я настроил HMR в промежуточном программном обеспечении бэкэнда:
app.UseWebpackDevMiddleware(new Microsoft.AspNetCore.SpaServices.Webpack.WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
и мой файл webpack.config.js
вот так:
const path = require('path');
module.exports = {
mode: 'development',
entry: { main: './scripts/app.tsx' },
output: {
path: path.resolve(__dirname, './wwwroot/js/dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx']
},
module: {
rules: [
{
test: /\.ts|\.tsx$/, include: /scripts/,
use: [
{
loader: 'babel-loader',
options: {
"plugins" : ['react-hot-loader/babel'],
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}
}
]
}
]
}
};
Веб-пакет указывает на этот файл, app.tsx
:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Application } from "./Application";
ReactDOM.render(
<div><Application /></div>,
document.getElementById("example")
)
if (module.hot) {
module.hot.accept()
}
У меня есть файл bundle.js
, используемый на веб-странице. Когда я запускаю веб-сервер и просматриваю страницу, я получаю [HMR] connected
в консоли. Когда я редактирую и сохраняю файл app.tsx
, я получаю ожидаемый результат:
client.js:234 [HMR] bundle rebuilding
client.js:242 [HMR] bundle rebuilt in 69ms
process-update.js:39 [HMR] Checking for updates on the server...
process-update.js:112 [HMR] Updated modules:
process-update.js:114 [HMR] - ./scripts/app.tsx
process-update.js:119 [HMR] App is up to date.
Однако, когда я редактирую и сохраняю application.tsx
(включая module.hot.accept()
внизу), я ничего не получаю - ни веб-сервер, ни браузер ничего не выводят. Я думаю, это может быть связано с тем, что HMR настроен только на просмотр файла app.tsx
:
[0] multi webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./scripts/app.tsx 40 bytes {main}
Кто-нибудь знает, в чем здесь может быть проблема? Это работает для файла, явно объявленного в файле конфигурации webpack, но не для модулей, которые он импортирует - разве другие файлы не должны включаться автоматически? Согласно https://webpack.js.org/guides/hot-module-replacement/ Я думаю, что у меня все настроено правильно, но я не смог использовать его именно потому, что конфигурация отличается при использовании промежуточного программного обеспечения ASP.NET Core.
Заранее спасибо.