webpack 4 aspnetcore 2.2 HMR не перезагружается в браузере

Я не могу исключить проблему совместимости с aspnetcore 2.2 и webpack 4 или проблему с конфигурацией с моей стороны.

Мне нужна помощь в обнаружении проблемы с конфигурацией, если она является причиной.

  • АСПНЕТКОР 2.2
  • ВЕБ-ПАКЕТ 4

Когда я вношу изменения в файл «.tsx», Visual Studio выводит, что веб-пакет был перестроен, однако браузер не обновляется, и в консоли нет сообщений. (Однако я получаю начальное сообщение HMRconnected в консоли браузера).

Вывод Visual Studio:

Microsoft.AspNetCore.NodeServices:Информация: сборка веб-пакета... Microsoft.AspNetCore.NodeServices:Информация: Проверка запущена в отдельном процессе...

754 мс 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"

EDIT: (добавление 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);

person proggrock    schedule 02.01.2019    source источник
comment
Я разработал минимальный воспроизводимый пример приложения ASP.NET Core 2.2, которое не будет HMR, но будет HMR, если я перейду на ASP.NET Core 2.1, но без других изменений. Я думаю, можно с уверенностью сказать, что HMR сломан в версии 2.2.   -  person Jesse Hallam    schedule 22.03.2019
comment
избежал проблемы, перейдя на aspnetcore 3.0   -  person proggrock    schedule 24.06.2019


Ответы (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"));

Дополнительные сведения см. в здесь

person itminus    schedule 03.01.2019
comment
Спасибо за подробный ответ. Я следовал примеру, указанному в ссылке, и изменил react-hot-loader на последнюю версию. Однако я все еще не могу заставить его работать. Я пересмотрел свой вопрос, чтобы показать код, который я добавил в boot.tsx и app.tsx. - person proggrock; 03.01.2019
comment
@proggrock Мне интересно, перезагружается ли упакованный main.js автоматически? - person itminus; 04.01.2019
comment
Проблема, которую вы объясняете в своем ответе, кажется, та же, что и у меня. HMR работает, я вижу как в консоли отладки кода VS, так и в консоли браузера, что [HMR] перестраивает пакет. В консоли отладки VS Code я успешно скомпилирован, но в консоли браузера - нет. Мое приложение не является SPA, поэтому, думаю, мне потребуется полное обновление страницы. Как заставить WebpackDevMiddleware сделать это? :) - person billy jean; 15.02.2019
comment
@billyjean способ сделать это горячим экспортом работает для меня. - person itminus; 15.02.2019