小编Sly*_*int的帖子

我正在尝试建立以下架构：一个核心 React 应用程序，它构建了一些基本功能，以及在运行时加载其他 React 组件的能力。这些额外的 React 组件可以按需加载，它们在构建核心应用程序时不可用（因此它们不能包含在核心应用程序的 bundle 中，必须单独构建）。经过一段时间的研究，我遇到了Webpack Externals，它看起来很合适。我现在使用以下 webpack.config.js 单独构建我的模块：

const path = require('path');
const fs = require('fs');

process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
  entry: './src/MyModule.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'MyModule.js',
    library: 'MyModule',
    libraryTarget: 'umd'
  },
   externals: {
    "react": "react",
    "semantic-ui-react": "semantic-ui-react"
   },
   module: {
    rules: [
        {
            test: /\.(js|jsx|mjs)$/,
            include: resolveApp('src'),
            loader: require.resolve('babel-loader'),
            options: {              
              compact: true,
            },
        } …