Webpack 5 导出函数失效、全局HotchPotch为undefined的配置问题排查

问题根因 #

你当前的配置核心问题是混用了 Webpack 5 新的output.library.type配置和已废弃的output.libraryTarget配置，二者导出规则冲突导致全局变量挂载失败。

Webpack 5 已经将原output.libraryTarget的所有功能整合到output.library.type字段中，同时设置两个字段时，library.type: 'global'和libraryTarget: 'var'的导出行为冲突，导致打包产物没有正确把库挂载到全局HotchPotch变量上，最终打印结果为undefined。

修复方案 #

二选一即可，推荐使用第一种Webpack 5 标准新语法：

方案1：使用Webpack 5新配置，删除废弃的libraryTarget字段

const config = {
  entry: './assets/javascripts/index.js',
  output: {
    library: {
      name: 'HotchPotch',
      type: 'window', // 浏览器环境直接挂载到window，适配多环境可改为'umd'
      // 若你的createTableFromJSON是通过export default导出的，额外加下面这行
      // export: 'default'
    },
    path: path.resolve(__dirname, 'static'), // Should be in STATICFILES_DIRS
    publicPath: '/static/', // Should match Django's STATIC_URL
    filename: 'main.js',
    clean: true
  }
}

方案2：兼容旧版本写法，移除output.library中的type配置

const config = {
  entry: './assets/javascripts/index.js',
  output: {
    library: 'HotchPotch',
    libraryTarget: 'var',
    path: path.resolve(__dirname, 'static'), // Should be in STATICFILES_DIRS
    publicPath: '/static/', // Should match Django's STATIC_URL
    filename: 'main.js',
    clean: true
  }
}

额外检查项 #

修改配置后如果还是导出失败，检查入口文件index.js的导出规则：

• 如果是export function createTableFromJSON(json) {}命名导出，挂载后的HotchPotch是一个对象，需要通过HotchPotch.createTableFromJSON调用函数
• 如果是export default createTableFromJSON默认导出，需要在output.library中添加export: 'default'配置，才能让HotchPotch直接指向导出的函数

内容的提问来源于stack exchange，提问作者TropicalRaisel