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

你这个情况挺常见的，externals 配置是对的，但问题出在「模块依赖链」上——不是 externals 没生效，而是你项目里某些地方直接 import $ from 'jquery' 或 import 'jquery'，Webpack 会把整个 jQuery 模块打包进 bundle，即使你配置了 externals，只要它出现在依赖图里就会被打包进去。

externals 只是告诉 Webpack：「别打包这个依赖，运行时从全局变量里取」，但前提是：你代码里不能显式 import 它，或者引入方式不触发模块解析。

推荐的做法是分两步：

1. 确保项目里所有地方都不要显式 import jQuery，改成用全局变量。比如把 import $ from 'jquery' 全删掉，改成直接用 window.jQuery 或 window.$。如果你用的是第三方库（比如 bootstrap）内部依赖了 jQuery，那就得配合 ProvidePlugin 注入。

2. 配合 ProvidePlugin 用，这样第三方模块里用到 $ 或 jQuery 时，会自动映射到全局变量，不会触发 import：

plugins: [

  new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    'window.jQuery': 'jquery'

  })

],

externals: {

  jquery: 'jQuery'

}

注意：ProvidePlugin 里的键值对写法很重要，要覆盖常见引用场景（比如有些库用 var $ = require('jquery')，有些直接用全局 $）。

另外检查下你的 import 语句有没有类似 import 'jquery/dist/jquery' 这种路径引用——这种路径引用会绕过 externals，必须改成裸模块名 import $ from 'jquery' 才能被 externals 拦截。但更稳妥的是直接别 import，让 ProvidePlugin 偷偷注入。

最后顺手跑个 webpack-bundle-analyzer 看下 vendor 里到底是谁占了空间，有时候是 bootstrap、popper 之类的间接依赖 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配置能匹配上，同时也要注意第三方库可能带来的干扰。按照上面的步骤调整一下，应该就能解决问题了。如果还有问题，可以再具体看看打包后的文件内容，找找线索。