Question

似乎我在使用webpack和我的react-router应用程序时遇到了某种配置问题。我试图通过页面拆分捆绑包，但我正在使用react-router，我有一个“main”，它使用router.run来路由应用程序路径。看起来当webpack运行该主文件时，它将递归地将所有模块从main写入生成的bundle。

这是一个可克隆的回购展示了行为

git clone https://github.com/adjavaherian/webpack-react-router
cd webpack-react-router
npm install
webpack

这将创建一个dist目录，您可以使用grep

检查该模块是否包含两次

$ grep -R zzz dist
dist/main.bundle.js:                'zzzzzz'
dist/mobileAppsPage.bundle.js:              'zzzzzz'

我期待这一点，因为我使用多个webpack条目，只有mobileAppsPage.bundle.js应该有“zzzzzz”，因为这是包含React TestClass.jsx的唯一地方。

关于我做错了什么的想法？

https://github.com/adjavaherian/webpack-react-router

Answer 1

我没有深入研究Webpacks捆绑拆分，但您的main.js和MobileAppsPage.jsx都有TestClass.jsx的直接依赖关系图。

由于main.js需要AppRoutes.jsx，MobileAppsPage.jsx需要main.js，MobileAppsPage.jsx和TestClass.jsx都依赖于require.ensure。因此，将这两者分开是没有多少胜利。

您可能想要做的是在启动时不要求您的路由组件，而是等待路由被命中，然后使用var MobileAppsPage = null; var MobileAppsPageLoader = React.createClass({ componentDidMount() { require.ensure(['./pages/MobileAppsPage'], () => { MobileAppsPage = require('./pages/MobileAppsPage'); this.forceUpdate(); }); }, render() { if (MobileAppsPage) { return <MobileAppsPage {...this.props} />; } else { return <div className="spinner" />; } } }); var AppRoutes = ( <Route path='/' handler={AppTemplate}> <Route name="FrontPage" path='/' handler={FrontPage}/> <Route name="MobileAppsPage" path="mobile-apps" handler={MobileAppsPageLoader}/> </Route> );（http://webpack.github.io/docs/code-splitting.html）异步加载该捆绑包。

这样的东西（尚未测试过）：

node_modules

您可能还想查看Webpack中代码拆分的示例，将模块从extjs拆分为单独的包（http://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code），因为您的所有包都可能依赖于React。 / p>

为什么webpack在我的第一个条目以及我的页面包

1 个答案: