Webpack未加载jQuery求助：ASP.Net项目集成时遇全局jQuery未定义问题

嘿，我刚帮几个做ASP.NET项目的朋友搞定过类似的Webpack + jQuery坑，咱们一步步来捋清楚问题：

核心原因先搞懂 #

Webpack默认会把所有模块封装在自己的闭包作用域里，哪怕你打包了jQuery，它也只是模块内部的变量，浏览器全局（window对象）根本访问不到，所以控制台调用jQuery或$才会提示未定义。另外你说bundle.js里jQuery内容很短，大概率是只打包了模块导出部分，没把完整的jQuery源码正确注入到全局。

一步步解决步骤 #

1. 先确认jQuery安装正确 #

首先确保你已经通过npm装了完整的jQuery包：

npm install jquery --save

别用什么精简版或者本地拷贝的CDN文件，直接用npm包更稳妥。

2. 把jQuery暴露到全局 #

这里有两种简单可靠的方式：

方式一：手动挂载到window对象

在你的Webpack入口文件（比如main.js）里，导入jQuery后直接挂到window上：

import $ from 'jquery';
// 同时挂载$和jQuery两个全局变量，兼容不同写法
window.$ = window.jQuery = $;

这样打包后，浏览器全局就能访问到jQuery和$了。

方式二：用expose-loader自动暴露

先安装expose-loader：

npm install expose-loader --save-dev

然后可以直接在导入时使用：

import $ from 'expose-loader?exposes=$,jQuery!jquery';

或者在webpack.config.js里配置规则，让所有jQuery导入自动暴露：

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      },
    ],
  },
};

3. 可选：用ProvidePlugin自动注入到模块 #

如果你想在项目的各个JS模块里不用手动import就能直接用$或jQuery，可以在webpack.config.js里配置ProvidePlugin：

const webpack = require('webpack');

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

注意：这个插件只是让模块内部能直接用，不代表全局能访问，要全局用还是得结合上面的暴露方式。

4. 检查ASP.NET页面的引用 #

确保你在ASP.NET的视图页面里，只引用打包后的bundle.js，而且放在所有依赖jQuery的脚本前面：

<!-- 删掉原来的jQuery引用，比如~/Scripts/jquery.js -->
<script src="~/dist/bundle.js"></script>
<!-- 其他需要用jQuery的脚本放在bundle.js之后 -->

为什么bundle.js里jQuery内容短？ #

大概率是你之前没正确导入完整的jQuery包，或者只是引用了模块的导出接口而没有触发完整代码打包。按照上面的步骤重新配置后，bundle.js里应该会包含完整的jQuery源码了。

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