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

Question

看来我的 webpack 和我的 react-router 应用程序存在某种配置问题。我试图按页面拆分包，但我使用的是 react-router 并且我有一个 "main" 执行 router.run 来路由应用程序路径。看起来当 webpack 运行那个主文件时，它会递归地将所有模块从主文件写入生成的包。

这是一个演示行为的可克隆代码库

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，而 AppRoutes.jsx 需要 MobileAppsPage.jsx，因此 main.js 和 MobileAppsPage.jsx 都依赖于 TestClass.jsx。因此，将这两者分开并没有太大意义。

您可能想要做的是在启动时不需要路由组件，而是等待路由被命中，然后使用 require.ensure (http://webpack.github.io/docs/code-splitting.html) 异步加载该包。

类似这样的东西（还没有测试过）：

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>
);

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

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

Why does webpack include a module in my first entry as well as my page bundle

reactjs

webpack

react-router