从一个 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

为 header 组件创建另一个入口点。引用自 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。

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

Output multiple React apps from one Webpack config

reactjs

webpack

react-portal