Webpack HMR не перезагружает импортированные модули TypeScript - PullRequest
Новая
       14

Webpack HMR не перезагружает импортированные модули TypeScript

0 голосов
/ 05 февраля 2019

Я управляю веб-сайтом 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.

Заранее спасибо.

1 Ответ

0 голосов
/ 03 марта 2019

Проблема заключалась в том, что webpack.config.js был настроен неправильно и не использовал должным образом реактивный горячий перегрузчик.

webpack.config.js

const webpack = require("webpack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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: ['./scripts/app.tsx'],
        },

        watchOptions: {
            ignored: /node_modules/
        },

        output: {
            filename: "dist/bundle.js",
            path: path.join(outputDir, 'wwwroot'),
            publicPath: '/'
        },

        resolve: {
            extensions: [".ts", ".tsx", ".js", ".jsx"]
        },

        devServer: {
            hot: true
        },

        module: {
            rules: [
                {
                    test: /\.(j|t)sx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true,
                            babelrc: false,
                            presets: [

                                "@babel/preset-env",
                                "@babel/preset-typescript",
                                "@babel/preset-react"
                            ],
                            plugins: [['@babel/plugin-proposal-decorators', {legacy: true}],
                                ['@babel/plugin-proposal-class-properties', {loose: true}],
                                "react-hot-loader/babel",
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                }
            ]
        },

        plugins: [
            new CleanWebpackPlugin(path.join(outputDir, 'wwwroot', 'dist')),
            new ForkTsCheckerWebpackPlugin()
        ]
    }];
};

scripts/app.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import App from "./Application";

ReactDOM.render(<App/>, document.getElementById("rootComponent"));

Объявление класса в scripts/Application.tsx: 

class Application extends React.Component<any,any> {   }

Дно scripts/Application.tsx: 

const App: FunctionComponent = () => <Application />;
export default hot(App);

Если кто-то еще борется с этим, я предлагаючтение примеров репозиториев GitHub, которые существуют для использования HMR, typcript и ASP.NET Core

...