Webpack打包后无法全局引用jQuery，出现Uncaught ReferenceError: $ is not defined错误

问题原因 #

你遇到的问题核心在于 Webpack 默认会将所有变量封装在模块作用域内，不会自动挂载到全局的window对象上：

• 你配置的ProvidePlugin只是帮你在每个模块中自动注入$变量，不用手动写require('jquery')，但它并没有把$暴露到全局作用域；
• 而你在test.html的<script>标签里写的代码是运行在全局作用域（window）下的，自然找不到模块作用域里的$。

另外注意你的test.html里还有个语法小错误：$(document).ready(function() {} 缺少闭合的);，这个也会导致代码运行异常，记得补上。

解决方案 #

最直接省心的办法是在入口文件index.js里，把需要全局访问的变量手动挂载到window上，这样全局作用域就能直接访问它们了：

修改你的index.js：

var _ = require('lodash');
var $ = require('jquery');

// 将变量挂载到window，暴露给全局作用域
window.$ = $;
window.jQuery = $; // 可选，同时暴露jQuery别名
window._ = _; // 如果你也需要在全局用lodash，顺便把_也挂上去

另一种方案：用expose-loader自动暴露 #

如果你不想手动修改入口文件，也可以用expose-loader通过Webpack配置实现全局暴露：

1. 先安装依赖：

npm install expose-loader --save-dev

2. 修改webpack.config.js的module.rules：

module: {
  rules: [
    {
      test: /\.js$/, 
      exclude: /node_modules/,
    },
    // 新增规则：把jQuery暴露为全局的$和jQuery
    {
      test: require.resolve('jquery'),
      loader: 'expose-loader',
      options: {
        exposes: ['$', 'jQuery'],
      }
    },
    // 可选：把lodash也暴露为全局的_
    {
      test: require.resolve('lodash'),
      loader: 'expose-loader',
      options: {
        exposes: ['_'],
      }
    }
  ],
}

这种方式不需要改动入口文件，Webpack会自动把指定模块暴露到全局window对象上。

验证修改 #

修改完成后重新用Webpack打包，然后打开test.html就能正常使用$和_了。另外还有个小细节：你原来的console.log里输出的是原数组[1,2,3,4,5]，应该改成shuffled变量才能看到洗牌后的结果，帮你一起指出来啦~

备注：内容来源于stack exchange，提问作者shenn