typescript Webpack 代码拆分“加载块失败”错误文件路径错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53704950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack Code Splitting 'Loading chunk failed' error wrong file path
提问by Martin Shishkov
I'm using React + Typescript with Webpack and I'm trying to load some of my react components when they are actually needed.
我正在将 React + Typescript 与 Webpack 一起使用，并且我正在尝试在实际需要时加载我的一些 React 组件。
The issue is that when the chunk is requested via lazy loading I'm getting the folling error:
问题是，当通过延迟加载请求块时，我收到以下错误：
Uncaught Error: Loading chunk 1 failed. (error: http://localhost:58988/1.chunk.js) at HTMLScriptElement.onScriptComplete (bootstrap:114)
未捕获的错误：加载块 1 失败。(错误: http://localhost:58988/1.chunk.js) 在 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.jsand it should be http://localhost:58988/dist/1.chunk.js
这个块生成成功并且没有任何错误，只是路径错误 -http://localhost:58988/1.chunk.js应该是http://localhost:58988/dist/1.chunk.js
I've also tried using the newest React.lazyto 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?
我也尝试使用最新React.lazy的延迟加载反应组件，但我遇到了同样的问题。那么，有没有办法告诉编译器如何解析这些文件路径？
Here's some of the code:
这是一些代码：
MyComponent.tsx
我的组件.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
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"]
}
};
回答by PlayMa256
That happens because output.publicPathby default is /.
发生这种情况是因为output.publicPath默认情况下是/.
Just update output.publicPathto point where you want it to be => /dist/.
只需更新output.publicPath以指向您想要的位置 => /dist/。
回答by Christos Lytras
When redeploying, on rebuilding the app bundles make sure NOTto clean the output folder with previous chunk files, because users that already have the app loaded will try to fetch previous chunk files that will not exist anymore.
重新部署时，在重建应用程序包时，请确保不要使用以前的块文件清理输出文件夹，因为已经加载了应用程序的用户将尝试获取不再存在的以前的块文件。
Best thing to do is to have an app version tracking (using AJAX and read from db or dynamic config file) and when the app detects a newer version, message the user about it and ask them to reload the page.
最好的办法是进行应用程序版本跟踪（使用 AJAX 并从数据库或动态配置文件中读取），当应用程序检测到更新版本时，向用户发送消息并要求他们重新加载页面。
