每当我转到使用特定组件的路由时，react-loadable都会显示404错误

Question

到目前为止，我一直在尝试对我的概念网站进行代码拆分，但它似乎就是不起作用。我有一个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.Not http://localhost:8080/0.bundle.js 404 (未找到)

2.拒绝执行来自'http://localhost:8080/0.bundle.js‘的脚本，因为其MIME类型('text/html')不可执行，并且启用了严格的MIME类型检查。

是的，我已经安装了语法-动态-导入babel插件。我能做些什么来解决这个问题呢？

Answer 1

如果还没有，请尝试在webpack.config.js中设置output.publicPath = '/'

output: {
  ...
  publicPath: '/',
  ...
}

Credit where credit is due