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

【问题标题】：React & Webpack - Project set up for multi page applicationReact 和 Webpack - 多页面应用程序的项目设置
【发布时间】：2018-08-17 15:12:17
【问题描述】：

我正在启动一个 react 项目（使用 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 实现所需的设置并做出反应？

【问题讨论】：

一个选项：为每个“页面”组件的索引创建一个条目。另一种选择：动态导入（）

标签： javascript reactjs webpack create-react-app

【解决方案1】：

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

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

【讨论】：

是的，如果可以，请这样做。这是一些很棒的东西
问题是没有使用动态加载。来自 webpack 文档：“......动态加载的模块不是入口点。简单的规则：每个 HTML 页面一个入口点。SPA：一个入口点，MPA：多个入口点......”。我已经完成了弹出应用程序并修改 webpack 生产配置。似乎创建一个单独的构建函数是唯一的方法。

【解决方案2】：

可能回答晚了，但我遇到了同样的问题并找到了一个我想分享的简单解决方案。

我按照以下步骤操作：

每个页面的 webpack 中有多个入口点
每个入口点的动态输出包名称
使用 HtmlWebpackPlugin 具有不同文件名的多个 html 输出文件，还定义了特定的块（包），


    new HtmlWebpackPlugin({ filename: 'index.html',template: './src/index.html' ,chunks:['page1']})

每个 html 页面的每个模板都有一个具有特定 id 的 div，比如说 root，react 应用使用它在 dom 上呈现其应用。
现在每个页面的每个 js 入口点都会有

    ReactDOM.render(<Page1 />, document.getElementById("root"));

【讨论】：

【解决方案3】：

查看Multiple Entry files 上的 Webpack 文档

看看webpack's github中的例子

【讨论】：

我做到了，但如何将其用于 React 应用程序？这就是问题所在。