时间戳

首页 > 解决方案 > React & Webpack - 为多页面应用程序设置项目

javascript - React & Webpack - 为多页面应用程序设置项目

问题描述

我正在启动一个反应项目（使用 create-react-app），其中将包含多个“单页”组件。因此，我假设开发的目录结构如下所示：

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

如果我在不做任何修改的情况下构建项目，它会将所有源代码和资源捆绑在一个目录下。好吧，这不适用于我正在为这个项目做的事情。我需要为每个页面提供不同的捆绑包。因此 /public 文件夹下的包应该类似于以下结构：

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

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

标签： javascriptreactjswebpackcreate-react-app

解决方案

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

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

推荐阅读