javascript - React 和 Webpack - 多页面应用程序的项目设置

Question

我正在启动一个 React 项目(使用 create-react-app)，其中将包含多个“一页”组件。因此，我认为开发的目录结构如下所示:

/Project
  /node_modules
  /public
  /src
    /components
      /layout
      /popup
      ...
    /pages
      /dashboard
        index.js
      /profiles
        index.js
        ...

如果我在不做任何修改的情况下构建项目，它将把所有源代码和资源捆绑在一个目录下。嗯，这对于我想要为这个项目做的事情是行不通的。我需要为每个页面提供不同的 bundle 。因此/public 文件夹下的包应该类似于以下结构:

/Project
  ...
  /build
    /dashboard
      /static
        /css
        /js
        /media
      index.html
    /profiles
      /static
        /css
        /js
        /media
      index.html
  ...

我查看了 webpack 文档中的“代码分割”。有一个很好的例子，有不同的入口点，但我无法适应它。如何使用 webpack 和 React 实现所需的设置？

Answer 1

我建议使用React代码分割，使用 React Loadable ，无需修改Webpack配置。

https://reactjs.org/docs/code-splitting.html