Webpack编译遗留PHP项目时Bootstrap Multiselect TypeError报错求助

这个错误的核心原因是bootstrap-multiselect初始化时未能正确获取到jQuery实例——即便你手动将jQuery挂载到window，Webpack的模块封装机制仍可能导致插件无法读取全局变量。以下是针对性的修复方案：

1. 启用webpack.ProvidePlugin #

取消Webpack配置中ProvidePlugin的注释，该插件会自动在所有模块中注入jQuery，确保每个依赖jQuery的插件都能直接获取实例，无需依赖全局window：

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
  }),
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery' // 兼容强制依赖全局jQuery的老插件
  }),
],

2. 优化jQuery全局暴露规则 #

调整expose-loader配置，确保jQuery被正确暴露到全局作用域：

{
  test: require.resolve('jquery'),
  use: [
    {
      loader: 'expose-loader',
      options: {
        exposes: [
          'jQuery',
          '$',
          { globalName: 'jQuery', moduleLocalName: 'default' },
          { globalName: '$', moduleLocalName: 'default' }
        ]
      }
    }
  ]
}

3. 稳妥调整导入顺序（可选） #

保持原有导入逻辑的同时，确保jQuery完全初始化后再加载依赖插件：

import $ from 'jquery';
// 同步挂载jQuery到全局
window.jQuery = window.$ = $;

// 按顺序导入插件，确保依赖链正确
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

import 'bootstrap-select/dist/css/bootstrap-select.css';
import 'bootstrap-select';

// ... 其他插件导入

// 最后导入bootstrap-multiselect
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
import 'bootstrap-multiselect/dist/js/bootstrap-multiselect.js';

4. 检查版本兼容性 #

确认bootstrap-multiselect与你安装的依赖版本匹配：

• 若使用jQuery 3.x，需确保bootstrap-multiselect为v0.9.18及以上版本
• 若使用Bootstrap 4，需使用适配Bootstrap 4的bootstrap-multiselect分支版本

修改完成后重新执行Webpack编译，刷新test.php页面即可验证错误是否消失。

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