Laravel Webpack构建jQuery、AdminLTE和Bootstrap报错求助

以下是几个针对性的排查和解决步骤：

1. 全局暴露jQuery到window对象 #

Webpack默认会将模块封装在独立作用域中，不会自动挂载到全局window，如果你的其他脚本（比如内联脚本、旧插件）依赖全局的jQuery或$，就会出现找不到的情况。

方法A：通过Webpack插件全局注入 #

在你的Webpack配置文件中添加webpack.ProvidePlugin，自动为所有模块注入jQuery：

const webpack = require('webpack');

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

方法B：手动在入口文件挂载 #

在js/app.js的最顶部添加：

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

2. 检查Laravel Mix的自动加载配置（如果使用Laravel Mix） #

如果你的项目用的是Laravel自带的Mix工具，可以直接用.autoload()方法简化配置：

mix.js('resources/js/app.js', 'public/js')
   .autoload({
       jquery: ['$', 'window.jQuery', 'jQuery']
   });

3. 确认依赖库的加载顺序 #

即使你调整了构建组件顺序，某些第三方库可能会异步加载或者在jQuery初始化前执行。确保在app.js中先导入jQuery，再导入所有依赖它的插件/脚本：

// 先导入jQuery
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 再导入依赖jQuery的插件
import './plugins/some-jquery-plugin.js';

4. 排查第三方库的兼容性 #

部分旧jQuery插件可能会使用typeof jQuery === 'undefined'这类检测逻辑，而Webpack的模块作用域会导致这类检测失效。可以尝试在插件脚本顶部手动导入jQuery，或者修改插件的检测逻辑为：

// 替换插件中的全局检测
const $ = require('jquery');
// 或者直接使用导入的$对象

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