我正在尝试对React.lazy使用动态导入。代码很简单
import React, { Component, Suspense, lazy, } from 'react';
const BlazyComponent = lazy(() => {
return import('./blazy');
});
class Main extends Component {
render () {
return (<Suspense fallback={<div>Loading...</div>}>
<BlazyComponent/>
</Suspense>);
}
}
export default Main;
因此,当我启动Webpack devServer时,浏览器控制台显示错误
index.js:114 Uncaught (in promise) Error: Loading chunk 0 failed.
(missing: http://domain/build/0.js)
at HTMLScriptElement.onScriptComplete (index.js:114)
如我所见,从index.css
和index.js
成功装入了http://domain:8080/build/test/index.css
和http://domain:8080/build/test/index.js
捆绑包。
但是从http://domain/build/0.js
加载块(webpack devServer忽略端口)。如何从http://domain:8080/build/0.js
强制加载块。
Webpack配置
entry: {
'test/index': [ 'babel-polyfill', './resources/assets/modules/test/index', ],
},
output: {
path: path.resolve(__dirname, './public/build/'),
publicPath: '/build/',
filename: '[name].js',
chunkFilename: '[name].js',
},
...
devServer: {
host: 'domain',
port: 8080,
},
PS。我知道,我可以使用环境变量,但是可以搜索更优雅的决策
答案 0 :(得分:0)
尝试将您的publicPath
更改为http://domain:8080/build/
吗?
请参见https://webpack.js.org/guides/public-path/#environment-based