为什么设置了webpack externals后jQuery还是被重复打包？

这个问题其实挺常见的，很多新手在用webpack的externals时都会遇到类似的情况。咱们一步步来分析和解决。

首先你要确认一下几个关键点。externals配置的作用是告诉webpack，某个模块不需要被打包进最终的bundle文件里，而是通过外部方式提供，比如CDN。但这里有几个容易出错的地方需要注意。

第一，检查你的externals配置是否正确匹配了jQuery的实际引用方式。你在配置里写的是 externals: { jquery: 'jQuery' }，这个配置的意思是：当代码中通过 import jquery from 'jquery' 或者 require('jquery') 引入jQuery时，webpack会把它映射到全局变量 jQuery 上。如果你的项目代码里用的是其他方式引入jQuery，比如直接用了 window.$ 或者 window.jQuery，那这个配置就不起作用了。

第二，确保你的项目代码中确实是以模块化的方式引入jQuery的。举个例子，如果你的代码里写了类似这样的东西：

// 这种方式会触发externals配置

import $ from 'jquery';

那么externals配置就会生效。但如果你的代码里完全没有模块化的引用，而是直接用了全局变量 window.jQuery 或 window.$，那webpack压根不会去处理jQuery的依赖，自然也不会应用externals配置。

第三，检查你的项目里有没有其他地方间接引入了jQuery。比如有些第三方库可能会自带jQuery依赖，这种情况下即使你配置了externals，这些库自己引入的jQuery还是会被打包进去。你可以通过查看打包后的vendor文件内容，找找是不是有这种情况。

接下来我们来解决这个问题。假设你的项目代码确实是用模块化方式引入jQuery的，那你可以这样调整配置：

1. 修改webpack.config.js的externals配置，确保它能正确匹配所有可能的jQuery引用方式。可以改成这样：

module.exports = {

  // 其他配置...

  externals: {

    jquery: 'jQuery', // 匹配 require('jquery') 或 import 'jquery'

    jQuery: 'jQuery', // 匹配 require('jQuery') 或 import 'jQuery'

    '$': 'jQuery'     // 匹配 require('$') 或 import '$'

  }

};

这样可以覆盖更多可能的引用方式。

2. 如果你的项目代码里没有模块化引入jQuery，而是直接用了全局变量，那就需要稍微改一下代码，显式地用模块化方式引入。比如在入口文件里加一句：

import $ from 'jquery';

window.$ = $; // 把jQuery挂到全局变量上

这样既能让externals配置生效，又能保证全局变量正常工作。

3. 最后，如果你发现vendor文件里还是有jQuery代码，那就可能是某些第三方库自己带了jQuery依赖。这种情况下你可以用webpack的 IgnorePlugin 来忽略这些重复的依赖。比如：

const webpack = require('webpack');



module.exports = {

  // 其他配置...

  plugins: [

    new webpack.IgnorePlugin({

      resourceRegExp: /^jquery$/, // 忽略jQuery模块

    })

  ]

};

总结一下，externals的原理就是告诉webpack哪些模块不需要打包，而是从外部环境获取。你需要确保代码中的引用方式和externals配置能匹配上，同时也要注意第三方库可能带来的干扰。按照上面的步骤调整一下，应该就能解决问题了。如果还有问题，可以再具体看看打包后的文件内容，找找线索。