ASP.Net Core项目首次使用Webpack打包时遭遇jQuery $ is not defined问题求助

我完全理解你现在的困扰——第一次在ASP.NET Core里用Webpack就碰到全局变量找不到的问题，试了各种配置都没解决确实头疼。咱们从几个关键配置点入手，一步步把这个问题搞定：

1. 完善ProvidePlugin的全局映射 #

你已经加了ProvidePlugin，但很多库（包括Bootstrap的一些内部逻辑）会直接检查window对象上的jQuery或$，而默认的ProvidePlugin只会给模块内部注入变量，不会挂载到window。所以把配置改成这样：

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery'
})

这样既保证模块内可以直接用$，也让全局window对象能访问到它们。

2. 用expose-loader强制全局暴露jQuery #

如果你的site.js是传统的全局脚本（没有用ES模块的import），仅靠ProvidePlugin可能不够——这时候需要用expose-loader把jQuery主动挂载到window上：

先安装依赖：

npm install expose-loader --save-dev

然后在webpack的module.rules里添加这条规则：

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

这个规则会专门处理jQuery模块，把它暴露成全局的$和jQuery变量。

3. 修正SCSS加载器的错误配置（顺带修复） #

你的scss规则里同时用了style-loader和MiniCssExtractPlugin.loader，这俩是互斥的：style-loader是把CSS注入到页面的style标签，MiniCssExtractPlugin是提取成单独文件。应该根据环境二选一：

use: [
  // 开发环境用style-loader（热加载方便），生产环境用提取插件
  argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
  'css-loader',
  'postcss-loader',
  'sass-loader'
]

这个虽然不直接影响jQuery，但留着会导致CSS打包异常，顺手修复了。

4. 确认jQuery已正确安装 #

虽然Bootstrap依赖jQuery，但偶尔会因为依赖树的问题没装上，执行这条命令确保它在你的项目里：

npm install jquery --save

5. 调整Entry顺序（可选但稳妥） #

把jQuery放到entry数组的最前面，确保它在Bootstrap和你的site.js之前被加载，避免依赖顺序问题：

entry: ['jquery', './node_modules/bootstrap/dist/js/bootstrap.bundle.js', './wwwroot/js/site.js', './wwwroot/scss/site.scss']

做完这些调整后，重新执行npm run build，再测试页面里的$应该就能正常访问了。

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