Я использую React + Typescript с Webpack и пытаюсь загрузить некоторые из моих реактивных компонентов, когда они действительно необходимы.
Проблема заключается в том, что, когда чанк запрашивается через отложенную загрузку, я 'm получает следующую информацию:
Uncaught Ошибка: загрузка чанка 1 не удалась.(ошибка: http://localhost:58988/1.chunk.js) в HTMLScriptElement.onScriptComplete (bootstrap: 114)
Этот чанк генерируется успешно и без каких-либо ошибок, просто путь неправильный - http://localhost:58988/1.chunk.js и ондолжно быть http://localhost:58988/dist/1.chunk.js
Я также пытался использовать новейшие React.lazy для отложенной загрузки компонентов реагирования, но у меня возникла та же проблема. Итак, есть ли способ сообщить компилятору, как решить этипути к файлам?
Вот часть кода:
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"]
}
};