到目前为止,我一直在尝试对概念网站进行代码拆分,但是似乎无法正常工作。我有一个STLMain组件(STLMain.js):
import React from 'react';
export default () => (
<div>
STLMain
</div>
);
在STLMainLoadable.js中使用了哪个:
import React from 'react';
import Loadable from 'react-loadable';
const loading = () => (
<div>
Loading...
</div>
);
export default Loadable({
loader: () => import('./STLMain'),
loading
});
然后在我的Router.js中使用哪个
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './main_pages/Home';
import NotFound from './main_pages/NotFound';
import STLMainLoadable from './main_pages/STLMainLoadable';
import Navigation from './navigation/Navigation';
export default () => (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/STLMain" component={STLMainLoadable} />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
每次我进入localhost:8080 / STLMain时,控制台都会出现两个错误:
1.GET http://localhost:8080/0.bundle.js 404(未找到)
2.拒绝从“ http://localhost:8080/0.bundle.js”执行脚本,因为其MIME类型(“ text / html”)不可执行,并且启用了严格的MIME类型检查。
是的,我安装了语法动态导入babel插件。 我该怎么做才能解决此问题?
答案 0 :(得分:1)
如果还没有,请尝试在output.publicPath = '/'
中设置webpack.config.js
:
output: {
...
publicPath: '/',
...
}