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

，希望它可以将 app的 <Header />装入博客的 #dom-element

如何实现？

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.js来自标头组件。