react-loadable无效【问题终结，通常是webpack配置问题】

Question

const Home = Loadable({
    loader : () => import('./Home'),
    loading:Loading
});
const Page = Loadable({
    loader : () => import('./Page'),
    loading:Loading
});


class App extends React.Component{
    render(){
        return (
            <HashRouter>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/Page" component={Page} />
                </Switch>
            </HashRouter>
        )
    }
};

export default App;

依赖项如下

"devDependencies": {
    "@types/history": "^4.7.2",
    "@types/react": "^16.7.13",
    "@types/react-dom": "^16.0.11",
    "awesome-typescript-loader": "^5.2.1",
    "cache-loader": "^2.0.0",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-import-plugin": "^1.5.5",
    "typescript": "^3.2.2",
    "typings-for-css-modules-loader": "^1.6.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@types/antd": "^1.0.0",
    "@types/node": "^10.12.15",
    "@types/react-loadable": "^5.4.2",
    "@types/react-router": "^4.4.3",
    "@types/react-router-dom": "^4.3.1",
    "antd": "^3.11.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-hot-loader": "^4.6.0",
    "react-loadable": "^5.5.0",
    "typed-css-modules": "^0.3.7",
    "typed-css-modules-loader": "0.0.17"
  }

在浏览器里输入/Page的时候，浏览器并没有动态获取Page.js，是不是我配置出错了？
目前还没有解决，可以帮忙看一下吗？

Answer 1

你用的是hashRouter, 所以应该是/#/page?

Answer 2

我也遇到了这个问题，看了官方文档，看了其他人写的博客，我自己也试了一下，只有react官方的脚手架的create-react-app才可以使用react-loadable，但是自己用webpack搭的react应用却不能使用react-loadable这个库，不知道是什么问题

Answer 3

老哥解决了吗