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

Question

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

• 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

如何实现这一点？

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。