Question

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

Answer 1

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

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

Answer 2

看看Multiple Entry files上的Webpack文档

看看webpack's github

中的示例

Answer 3

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

我按照以下步骤操作：

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


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

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

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

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

3 个答案: