为什么 Webpack 5 外部返回空对象？

Question

我有一个功能齐全的库包。我从 Webpack 4 升级到 Webpack 5，突然我的外部包返回一个空对象。我完全失去了想法。我的配置已经正确，包括以下解决方案：

为什么 webpack 在需要输出时返回一个空对象？

我的模块现在单独导出它，但我仍然有一个问题：

import React from 'react';

const uxp = require('uxp');

export const ExportAsSection = () => {
  console.log("UXP TEST:")
  // empty object, although doing the same from a console shows the expected global object
  console.log(uxp)

  // Renders no issue
  return (
      <div>I am a panel</div>
  );
};

我的相关配置是这样的：

const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('../../webpack.config');

const config = {
  context: __dirname,
  entry: './src/index.tsx',
  externals: {
    lodash: 'lodash',
    'react-dom': 'react-dom',
    react: 'react',
    uxp: 'commonjs2 uxp'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(svg)$/i,
        use: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            options: {
              svgo: {
                plugins: [
                  {
                    convertPathData: { noSpaceAfterFlags: false },
                  },
                  {
                    mergePaths: false,
                  },
                  {
                    removeViewBox: false,
                  },
                ],
              },
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: 'example-export.umd.js',
    path: path.resolve(__dirname, 'dist'),
    library: '@example/export',
  },
};

module.exports = merge(baseConfig, config);

基本配置是这样的：

const webpack = require('webpack');
const path = require('path');
const git = require('git-rev-sync');

const dev = process.env.MODE === 'development' ? '-dev' : '';
const production = process.env.MODE === 'production';

const pluginRev = `${git.short()}${dev}`;

module.exports = {
  entry: './src/index.ts',
  mode: production ? 'production' : 'development',
  devtool: production ? false : 'eval-cheap-module-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              configFile: path.resolve(__dirname, './babel.config.json'),
            },
          },
          {
            loader: 'ts-loader',
            options: {
              allowTsInNodeModules: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      PLUGIN_REV: JSON.stringify(pluginRev),
    }),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: {
      buffer: require.resolve('buffer'),
    },
  },
  output: {
    libraryTarget: 'umd',
  },
};

输出 UMD 文件也有这一点看起来似乎正确：

/***/ "uxp":
/*!**********************!*\
  !*** external "uxp" ***!
  \**********************/
/***/ ((module) => {

module.exports = require("uxp");

/***/ }),

更新 我还通过降级到 Webpack 4 进行了理智检查，但无法重现问题。然后我回到 Webpack 5，使用我的 Webpack 5 配置，并制作了

devtool: false

，这样它就可以从一个冲突的、破坏性的更改和返回的问题中重新构建。所以肯定要在这里升级。

更新2 我削减了所有代码，只从 React 返回一个 div，因此 UMD 编译的 JS 非常可读。我的 UMD 包使用 Webpack 4 导入到项目中。最初导入编译后的代码时，

self.require

、

window.require

和

require

都返回我所期望的结果。当调用 webpack 的 require 方法时，

require

不再返回任何内容（尽管

self.require

和

window.require

会返回任何内容。如果我尝试在此时执行

console.log(require)

，我也会得到像

__webpack_modules__[moduleId]

这样的异常，尽管我找不到

require

到底在哪里会以这种方式被覆盖。我想知道

require

是否通过 Webpack 4 以一种方式操作，通过 Webpack 5 以另一种方式操作，并且冲突导致了我的问题。

Answer 1

问题在于 webpack 如何覆盖

require

。在 webpack 4 应用程序中使用 webpack 5 捆绑包会导致这些问题。我专门将我的应用程序切换到 Vite 来解决这个问题。