从一个 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" />`

并期望它在博客的 #dom-element

中挂载应用的 <Header />

如何做到这一点？

Answer 1

为标题组件创建另一个入口点。引用 webpack docs:

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

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