使用Webpack 5时jQuery无法正常工作，求排查解决方法

你的问题核心是jQuery插件（比如Modal，大概率是Bootstrap的）没有正确挂载到Webpack打包后的jQuery实例上，加上Webpack的模块作用域隔离机制，导致调用modal方法时找不到对应的实现。

具体原因 #

Webpack会将导入的模块变量（比如你导入的$）重命名为内部变量（比如q）来避免全局污染，你手动把$挂到window上虽然能让全局访问到jQuery，但如果Modal插件没有基于这个jQuery实例进行挂载，就会出现方法不存在的错误。

解决步骤 #

1. 确保插件在jQuery之后导入

如果Modal是Bootstrap这类依赖jQuery的插件，必须在导入jQuery之后再导入插件，保证插件能找到并挂载到正确的jQuery实例上：

// home.js
import $ from "jquery";
window.jQuery = $;
window.$ = $;
// 导入Bootstrap（或对应的Modal插件）
import 'bootstrap'; 
// 如果你只用到Modal，可以单独导入对应的模块，减少体积
// import 'bootstrap/js/dist/modal';

2. 用Webpack的ProvidePlugin全局注入jQuery（更推荐）

手动挂载window容易出现实例不一致的问题，直接用Webpack内置的ProvidePlugin让它自动给所有需要jQuery的模块注入实例，同时全局也能访问到：
修改webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

配置后，你可以删掉home.js里手动挂载window.$和window.jQuery的代码，Webpack会自动处理全局和模块内的jQuery引用，插件也能正确挂载方法。

3. 检查插件的模块格式

如果Modal插件是UMD格式，确保它能识别Webpack提供的jQuery变量，而不是只找全局的旧jQuery实例。大部分主流插件（比如Bootstrap）都支持这种场景，无需额外配置。

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