我在Webpack中使用React+Typescript,并try 在实际需要时加载一些React组件.

问题是,当通过延迟加载请求块时,我会得到以下错误:

未捕获错误:加载区块1失败.

这个区块成功生成,没有任何错误,只是路径错误——http://localhost:58988/1.chunk.js,应该是http://localhost:58988/dist/1.chunk.js

我也try 过使用最新的React.lazy来延迟加载react组件,但我也遇到了同样的问题.那么,有没有办法告诉编译器如何解析这些文件路径?

Here's some of the code:

MyComponent.tsx

import * as React from "react";
import * as ES5Promise from "promise";

export class MyComponent extends React.Component<{}, {}> {
    constructor(props) {
        super(props);
    }

    private readonly onLoadModuleClickHandler = (): void => {
        import("./Button").then((module) => {
            console.log(module);
        });
    }

    render() {
        return (
            <div>
                <input type="button" value="Load another module" onClick={this.onLoadModuleClickHandler}/>
            </div>
        );
    }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "esnext",
    "removeComments": false,
    "sourceMap": false,
    "target": "es5",
    "jsx": "react",
    "noEmit": true,
    "importHelpers": true,
    "lib": ["dom", "es5", "es2015.promise"]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.config.js

module.exports = {
    entry: {
        "app": "./src/App.tsx"
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                use: "awesome-typescript-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)?$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
                }, {
                    loader: "less-loader"
                }]
            },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    }
};

推荐答案

这是因为默认情况下output.publicPath/.

Just update output.publicPath to point where you want it to be => /dist/.

Typescript相关问答推荐

如何将http上下文附加到angular中翻译模块发送的请求

Angular 17 Select 错误core.mjs:6531错误错误:NG 05105:发现意外合成监听器@transformPanel.done

TS不推断类型在条件判断后具有属性'

SortKey类型不起作用,尽管它使用的单个类型工作正常<>'

在Typescribe中,extends工作,但当指定派生给super时出错""

具有继承的基于类的react 组件:呈现不能分配给基类型中的相同属性

在实现自定义主题后,Angular 不会更新视图

使用Dockerfile运行Vite React应用程序时访问env变量

是否可以从函数类型中创建简化的类型,go 掉参数中任何看起来像回调的内容,而保留其余的内容?

是否可以基于对象的S属性值[]约束对象的其他属性值用于类型化的对象数组?

Cypress页面对象模型模式.扩展Elements属性

获取一个TypeScrip对象,并将每个属性转换为独立对象的联合

如何从MAT-FORM-FIELD-MAT-SELECT中移除焦点?

如何正确调用创建的类型?

使用Type脚本更新对象属性

map 未显示控制台未显示任何错误@reaction-google-map/api

TypeScrip:使用Cypress测试包含插槽的Vue3组件

TS不能自己推断函数返回类型

Typescript 子类继承的方法允许参数中未定义的键

是否有可能不允许在 TypeScript 中设置类属性,但也会抛出运行时错误?