Webpack 代码拆分“加载块失败"错误文件路径错误 [英] Webpack Code Splitting 'Loading chunk failed' error wrong file path

问题描述

我正在将 React + Typescript 与 Webpack 一起使用，并且我正在尝试在实际需要时加载我的一些 React 组件.

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

<块引用>

未捕获的错误:加载块 1 失败.(错误:http://localhost:58988/1.chunk.js)在 HTMLScriptElement.onScriptComplete (bootstrap:114)

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

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

以下是部分代码:

MyComponent.tsx

import * as React from react";import * as ES5Promise from "promise";导出类 MyComponent 扩展了 React.Component<{}, {}>{构造函数(道具){超级(道具)；}私有只读 onLoadModuleClickHandler = (): void =>{import("./Button").then((module) => {控制台日志(模块)；});}使成为() {返回 (<div><输入类型=按钮"值=加载另一个模块"onClick={this.onLoadModuleClickHandler}/>

);}}

tsconfig.json

<代码>{编译器选项":{模块分辨率":节点"，noImplicitAny":假，noEmitOnError":真，模块":esnext"，removeComments":假，sourceMap":假，目标":es5"，jsx":反应"，noEmit":真，importHelpers":真，lib":[dom"、es5"、es2015.promise"]},排除":[节点模块"，wwwroot"]}

webpack.config.js

module.exports = {入口: {应用":./src/App.tsx"},输出: {路径:path.resolve(__dirname, 'wwwroot/dist'),文件名:[名称].bundle.js"，块文件名:[名称].chunk.js"；},模块: {规则: [{测试:/\.(ts|tsx)?$/,使用:awesome-typescript-loader"，排除:/node_modules/},{测试:/\.(css|less)?$/,用: [{加载器:样式加载器"}, {loader: css-loader?modules&localIdentName=[local]--[hash:base64:5]";}, {装载机:少装载机"}]},]},解决: {扩展名:[.js"、.jsx"、.ts"、.tsx"、.css"、.less"]}};

解决方案

发生这种情况是因为 output.publicPath 默认是 /.

只需更新 output.publicPath 以指向您想要的位置 => /dist/.

I'm using React + Typescript with Webpack and I'm trying to load some of my react components when they are actually needed.

The issue is that when the chunk is requested via lazy loading I'm getting the following error:

Uncaught Error: Loading chunk 1 failed. (error: http://localhost:58988/1.chunk.js) at HTMLScriptElement.onScriptComplete (bootstrap:114)

This chunk is generated successfully and without any errors, it's just that the path is wrong - http://localhost:58988/1.chunk.js and it should be http://localhost:58988/dist/1.chunk.js

I've also tried using the newest React.lazy to lazy load react components but I'm getting the same issue. So, is there a way to tell the compiler how to resolve these file paths?

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"]
    }
};

解决方案

That happens because output.publicPath by default is /.

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

这篇关于Webpack 代码拆分“加载块失败"错误文件路径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！