reactjs - 从一个 Webpack 配置输出多个 React 应用程序

Question

我正在开发一个带有 WordPress 配套网站的网络应用程序。让我们假设域如下：

• app.site.com
• blog.site.com

我想做的是让我的 webpack 4 配置输出，bundle.js但也生成类似的东西header.js，包括单个<Header />组件（不是完整的应用程序）。

然后我会添加一个脚本标签来blog.site.com喜欢这样：

<script src="https://app.site.com/build/header.js" />`

并期望它将应用程序 <Header />安装在博客的 #dom-element

如何做到这一点？

标签： reactjswebpackreact-portal

Answer 1

为标题组件创建另一个入口点。引用 webpack文档：

module.exports = {
  entry: {
    bundle: './src/app.js',
    header: './src/header.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
};

这bundle.js将从您的初始入口点创建。也header.js来自 Header 组件。