webpack 4 aspnetcore 2.2 HMR не перезагружается в браузере
Я не могу исключить проблему совместимости с aspnetcore 2.2 и webpack 4 или проблему конфигурации на моем конце.
Мне нужна помощь в определении проблемы конфигурации, если это является причиной.
- ASPNETCORE 2.2
- WEBPACK 4
Когда я изменяю файл ".tsx", Visual Studio выводит, что веб-пакет перестроен, однако браузер не обновляется, и в консоли нет сообщений. (Однако я получаю начальное сообщение о подключении HMR в консоли браузера).
Вывод Visual Studio:
Microsoft.AspNetCore.NodeServices: Информация: создание веб-пакета... Microsoft.AspNetCore.NodeServices: Информация: Проверка запущена в отдельном процессе...
754ms Microsoft.AspNetCore.NodeServices: Информация: веб-пакет построен 1e45bf5f88ad514f4a12 за 4940 мс
Скомпилировано успешно. запуск HTTP / 1.1 GET https://localhost:44331/__webpack_hmr
webpack.config.js:
const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const outputDir = (env && env.publishDir)
? env.publishDir
: __dirname;
return [{
mode: isDevBuild ? 'development' : 'production',
devtool: 'inline-source-map',
stats: { modules: false },
entry: { 'main': './client/boot.tsx' },
watchOptions: {
ignored: /node_modules/
},
output: {
filename: "dist/[name].js",
path: path.join(outputDir, 'wwwroot'),
publicPath: '/'
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
devServer: {
hot: true
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
include: /client/,
loader: [
{
loader: 'awesome-typescript-loader',
options: {
useCache: true,
useBabel: true,
babelOptions: {
babelrc: false,
plugins: ['react-hot-loader/babel'],
}
}
}
]
},
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [
new CleanWebpackPlugin(path.join(outputDir, 'wwwroot', 'dist')),
new CheckerPlugin()
]
}];
};
Startup.cs Настройка:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
}
package.json:
"devDependencies": {
"@babel/core": "*",
"@babel/preset-env": "*",
"@types/history": "4.6.0",
"@types/jest": "^23.3.2",
"@types/node": "^10.9.1",
"@types/react": "^16.7.13",
"@types/react-dom": "16.0.11",
"@types/react-hot-loader": "3.0.3",
"@types/react-router": "4.4.1",
"@types/react-router-dom": "4.3.1",
"@types/webpack-env": "^1.13.6",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "^5.2.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "*",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-loader": "0.28.4",
"enzyme-to-json": "^3.3.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"file-saver": "^1.3.8",
"isomorphic-fetch": "2.2.1",
"jest": "^23.6.0",
"jquery": "^3.2.1",
"json-loader": "0.5.4",
"moment": "^2.22.2",
"raf": "^3.4.0",
"react": "^16.6.3",
"react-deep-force-update": "2.1.1",
"react-dom": "^16.6.3",
"react-hot-loader": "^4.0.0",
"react-router-dom": "4.1.1",
"react-select": "^2.0.0",
"style-loader": "0.18.2",
"ts-jest": "^23.10.3",
"ts-loader": "^2.0.1",
"typescript": "^2.9.2",
"url-loader": "0.5.9",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2"
РЕДАКТИРОВАТЬ: (добавив boot.tsx и app.tsx, чтобы показать горячую загрузку модуля)
boot.tsx
import * as React from 'react';
import { runWithAdal } from 'react-adal';
import * as ReactDOM from 'react-dom';
import App from './app';
import { authContext } from './authentication/azure/azureConfig';
const DO_NOT_LOGIN = false;
function renderApp() {
ReactDOM.render(
<App />,
document.getElementById('react-app')
);
}
runWithAdal(authContext, () => {
renderApp();
}, DO_NOT_LOGIN);
app.tsx
import * as React from 'react';
import { hot } from 'react-hot-loader';
import { Provider } from 'react-redux';
import * as RoutesModule from './routes';
import { BrowserRouter } from 'react-router-dom';
import configureStore from './store/configureStore';
let routes = RoutesModule.routes;
const store = configureStore({});
const baseUrl =
document.getElementsByTagName('base')[0].getAttribute('href')!;
const App: React.SFC = () => <Provider store={store}>
;
export default hot(module)(App);
1 ответ
Согласно вашей конфигурации выше, вы упаковываете файлы js в "wwwroot/dist/[name].js", output информация указывает на то, что Webpack Функция горячей перезагрузки настроена правильно. Но похоже что Webpack понятия не имеет о том, что index страница есть. Другими словами, любые изменения, внесенные в *.tsx модули будут перезагружать только скомпилированные wwwroot/dist/main.js файл.
Например, я создаю App.tsx файл:
import * as React from "react";
import * as ReactDOM from 'react-dom';
export const App = () => <div>Hello World!</div>
и сделать App.tsx в boot.tsx,
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {App} from "./App";
ReactDOM.render(<App/>, document.getElementById("appconainer"));
Когда я обслуживаю индексную страницу MVC или же StaticFiles и затем протестируйте свою конфигурацию, Webpack не будет знать, что должен сделать запрос home/index действие (или некоторый URL "index.htm") для обновления.
Возможный подход к исправлению
Поскольку вы установили react-hot-loader пакет, один из подходов заключается в использовании hot() функция для преобразования корневого компонента в hot-exported:
// file: `App.tsx`
import { hot } from 'react-hot-loader/root'
export const App = () => <div>Hello World!</div>
export const HotApp = hot(App); // make it hot-exported!
и сделать hot-exported корневой компонент:
// file: root.tsx
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {HotApp} from "./App"; // use the Hot-Exported component as the root component
ReactDOM.render(<App/>, document.getElementById("appconainer"));
Для получения более подробной информации см. Документы здесь