多Webpack打包导致Bootstrap脚本失效问题求解

项目配置 #

core.js #

import * as bootstrap from 'bootstrap';
import { Popover } from 'bootstrap';
//...使用Popover的相关代码

someFancyPlugin.js #

import { Popover } from 'bootstrap';
//...使用Popover的其他相关代码

HTML引入打包后的文件：

<script src="/build/core.js" defer></script>
<script src="/build/someFancyPlugin.js" defer></script>

现象 #

当两个文件都包含import { Popover } from 'bootstrap';时，Bootstrap的原生JS功能（如下拉菜单）无法正常触发；注释其中一个文件的该导入语句后，功能恢复正常。

解决方案 #

原因分析 #

Webpack默认会为每个入口文件单独打包依赖模块，这就导致两个入口都导入Bootstrap时，页面中会存在两个独立的Bootstrap实例。Bootstrap的组件（如下拉、模态框）依赖内部统一的状态和事件绑定逻辑，多个实例共存会互相干扰，导致原生功能失效。

方案1：全局共享Bootstrap实例 #

在一个入口文件中完整导入Bootstrap并挂载到全局，其他文件直接使用全局实例，不再单独导入：

修改core.js：

import * as bootstrap from 'bootstrap';
// 将Bootstrap挂载到全局window对象
window.bootstrap = bootstrap;

// 直接使用全局实例的Popover
const corePopover = new bootstrap.Popover('#core-popover');
// ...其他业务代码

修改someFancyPlugin.js：

// 不再单独导入Popover，直接使用全局的bootstrap实例
const pluginPopover = new window.bootstrap.Popover('#plugin-popover');
// ...其他业务代码

方案2：Webpack抽离公共Bootstrap chunk #

通过Webpack的splitChunks配置，将Bootstrap抽离为公共模块，让两个入口共享同一个Bootstrap实例：

修改webpack.config.js：

module.exports = {
  // ...其他基础配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        bootstrapVendor: {
          // 匹配node_modules中的bootstrap模块
          test: /[\\/]node_modules[\\/](bootstrap)[\\/]/,
          name: 'vendor-bootstrap', // 公共chunk的文件名
          chunks: 'all',
          priority: 10, // 确保优先抽离Bootstrap
        },
      },
    },
  },
};

修改HTML引入顺序，先加载公共chunk：

<script src="/build/vendor-bootstrap.js" defer></script>
<script src="/build/core.js" defer></script>
<script src="/build/someFancyPlugin.js" defer></script>

这样Webpack会把Bootstrap的代码单独打包到vendor-bootstrap.js中，两个入口文件都会引用这个公共模块，页面中只会存在一个Bootstrap实例，避免冲突。

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