Webpack配置CDN引入jQuery运行报未定义错误如何解决

API 探路者

2026-8-26

问题原因

你写的externals: { jquery: 'jQuery' }配置本身没有问题，报错的核心原因出在HtmlWebpackPlugin的配置上：你没有给插件指定自定义模板路径，插件根本不会读取你手动写了jQuery CDN标签的源index.html，每次构建都会自动生成一个全新的空白html文件，你加的CDN脚本标签完全没被打包进最终产物，运行时全局根本不存在jQuery对象，自然会报未定义的错误。
额外提一句：本地不需要npm安装jQuery包，externals的作用本来就是告知webpack不要打包对应模块，直接从全局取变量，装不装npm包都不影响这个逻辑。

修复步骤

先把你写了jQuery CDN引入的源index.html移动到项目可被webpack读取的路径，比如放到src/client/index.html位置。
修改webpack.config.js里的HtmlWebpackPlugin配置，指定template参数指向你自己的源html，同时配置多入口对应的chunks，避免js注入错乱：

plugins: [
  new HtmlWebpackPlugin({
    // 替换成你自己源index.html的实际存放路径
    template: './src/client/index.html',
    // 对应你entry里配置的两个入口，插件会自动把打包后的这两个js注入到html里
    chunks: ['index', 'header']
  }),
  // 原有的CopyPlugin配置不需要改动，保持原样即可
  new CopyPlugin({
    patterns: [
      { from: "*", context: "./src/client/html/static/"},
    ],
  })
],

externals配置保留对象形式即可，数组形式的写法不符合当前场景，不用再尝试：

externals: {
  jquery: 'jQuery'
},

删掉源index.html底部手动写的两个script标签（就是引入../js/index.js和../js/header.js的两行），这两个文件是你源码路径下的文件，构建后不会存在这个路径，HtmlWebpackPlugin会自动把打包好的正确路径的js文件注入到最终生成的html里，不需要手动引入。

验证方式

重新执行构建命令后，打开dist目录下生成的index.html检查：

head标签内存在你配置的jQuery CDN script标签
html底部自动注入了打包后的index.js和header.js
打开页面运行时控制台不再报jQuery/$未定义的错误，代码中import $ from 'jquery'可以正常拿到全局挂载的jQuery对象

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