Webpack打包时已引入的BootstrapCookieConsentSettings未被打包报错如何解决

从构建日志可以确认bootstrap-cookie-consent-settings依赖已经被正常打包进bundle，报错核心原因是导入方式不匹配、模块导出配置异常等，可按以下步骤依次排查修复：

• 修正导入方式
  该npm包使用默认导出而非具名导出，将_webpack/entry.js中的导入语句替换为：

import BootstrapCookieConsentSettings from "bootstrap-cookie-consent-settings";

后续new调用逻辑无需修改，保持new BootstrapCookieConsentSettings(...)即可。

• 补全webpack库导出配置
  你当前仅配置了库名称，未指定导出类型，需显式配置输出的库挂载规则，修改webpack.config.js的output字段：

output: {
  path: __dirname + "/assets",
  filename: "js/bundle.js",
  library: {
    name: "phasmo",
    type: "window"
  }
}

该配置会直接将导出的所有方法挂载到window.phasmo对象上，适配页面直接调用的场景。

• 调整babel配置避免模块转换冲突
  babel默认会把ES模块转换为CommonJS模块，可能和webpack的原生模块处理逻辑冲突，修改babel-loader的配置：

use: {
  loader: "babel-loader",
  options: {
    presets: [['@babel/preset-env', {modules: false}]]
  }
}

设为modules: false后babel不会处理ES模块导入导出逻辑，统一交给webpack处理更稳定。

• 强制保留依赖避免被tree shaking误删
  如果生产模式下仍出现该错误，给导入语句添加webpack注释，标记该依赖有副作用不被摇树优化：

import BootstrapCookieConsentSettings from "bootstrap-cookie-consent-settings"; /* webpack sideEffects: true */

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