Question

我正在运行一个用TypeScript编写的React前端的ASP.NET Core网站。我已经在后端中间件中设置了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"]
                        }
                    }
                ]
            }
        ]
    }
};

Webpack指向此文件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文件。当我运行Web服务器并浏览到页面时，我将[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配置文件中显式声明的文件，但不适用于它正在导入的模块-其他文件是否应自动包含在内吗？根据{{3}}，我认为我已经正确设置了所有内容，但是由于ASP.NET Core中间件的配置不同，因此我无法完全使用它。

谢谢。

Answer 1

问题是webpack.config.js的设置不正确，并且没有正确使用react-hot-reloader。

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，打字稿和ASP.NET Core

Webpack HMR无法重新加载导入的TypeScript模块

1 个答案: