如何在Webpack 4中仅在特定模块中引入jQuery？

你遇到的问题其实是两个原因叠加导致的，我帮你拆解并给出解决方案：

问题根源 #

1. jQuery的导入方式不正确 #

jQuery的ES模块采用默认导出，并非命名导出。你用import { $, jQuery } from 'jquery'的写法，是尝试从jQuery的导出对象中解构$和jQuery属性，但实际上jQuery默认导出的就是$本身，这直接导致了jQuery变量未定义（你看到$暂时能用可能是Webpack缓存或其他残留机制的巧合）。

2. Dropzone依赖全局jQuery引用 #

Dropzone内部会尝试访问全局作用域下的jQuery或window.jQuery，当你移除ProvidePlugin的全局注入后，Dropzone找不到它需要的依赖，最终引发了调用$(this).dropzone()时的报错。

解决方案一：修正导入并手动挂载全局（简单直接） #

把模块里的导入代码改成这样：

// 正确导入jQuery，默认导出就是$
import $ from 'jquery';
// 给jQuery变量赋值，同时挂载到window上满足Dropzone的依赖
const jQuery = $;
window.jQuery = $;
window.$ = $;

// 再导入Dropzone
import Dropzone from 'dropzone';

这样修改后，当前模块内的$和jQuery都能正常使用，同时window上也存在了Dropzone需要的全局引用，你的$('.dropzone').each(...)代码就能正常执行了。

解决方案二：用imports-loader给Dropzone单独注入依赖（更优雅，不污染全局） #

如果你不想把jQuery挂载到全局window上，可以用Webpack的imports-loader给Dropzone单独注入jQuery依赖：

首先安装loader：

npm install imports-loader --save-dev

然后在你的Webpack配置文件中添加规则：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // ...已有的其他规则
      {
        test: require.resolve('dropzone'),
        use: 'imports-loader?wrapper=window&jQuery=jquery'
      }
    ]
  }
};

之后在模块里只需要正常导入即可：

import $ from 'jquery';
import Dropzone from 'dropzone';

这个loader会在Dropzone的模块代码顶部自动注入jQuery的引用，让Dropzone内部能访问到它需要的依赖，同时不会污染全局作用域。

验证 #

修改完成后重新打包项目，你会发现控制台的错误消失，Dropzone也能正常初始化了。后续如果有其他依赖jQuery的插件，都可以用类似的方式处理，既能减少全局依赖，又能保证插件正常工作。

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