导入时 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);

页面上没有任何错误，控制台只会显示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。如果您考虑一下，这很明显，但也许这会帮助碰巧错过它的其他人。控制台中缺少错误无助于调试。