Question

只分享一个问题和解决方案，我花了几个小时进行调试：

我有一个代码库，希望将其构建为带有webpack的库，并包含在另一个项目中。但是，当我将输出文件导入另一个库时，它将返回undefined。

这是（简化的）webpack配置：

{
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app/my-app.[name].js'
    library: 'my-app',
    libraryTarget: 'umd'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          name: 'vendors',
          test: /[\\/](node_modules|libraries)[\\/]/
        }
      }
    },
    minimizer: [new TerserPlugin({
      cache: true,
      sourceMap: true,
      parallel: true,
      exclude: [/my-app.vendors.js/]
    })]
  },
}

从另一个项目中，我将导入库，如下所示：

const lib = require('./lib/my-app/dist/my-app.main');
console.log(lib);

该页面上没有任何错误，控制台将仅显示undefined。

Answer 1

结果证明，解决方案很简单：由于我使用的是splitChunks，因此输出包含3个文件：my-app.runtime.js，my-app.vendors.js和my-app.main.js。我以为每个块都会自动require其必要的依赖关系，但是我以为是错误的。为了使库正常工作，我需要这样导入：

require('./lib/my-app/dist/my-app.runtime');
require('./lib/my-app/dist/my-app.vendors');
const lib = require('./lib/my-app/dist/my-app.main');
console.log(lib);

另一个很重要，因为main将需要vendors和runtime。

考虑一下就很明显了，但这也许会帮助碰巧错过它的其他人。控制台中缺少错误不会帮助调试。

Webpack库构建在导入时返回未定义

1 个答案: