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

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);

如果页面上没有任何错误，控制台将仅显示未定义。

Answer 1

事实证明，解决方案很简单:由于我使用的是 splitChunks，输出由 3 个文件组成:my-app.runtime.js、my -app.vendors.js 和 my-app.main.js。我假设每个 block 都会自动需要其必要的依赖项，但我假设错误。为了使库正常工作，我需要像这样导入:

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将需要 vendor 和运行时。

如果你仔细想想，这是很明显的，但这也许会对其他碰巧错过它的人有所帮助。控制台中没有错误对调试没有帮助。