使用Webpack引入jquery-sparkline时遇TypeError报错求助

这个报错我太熟了，本质就是jquery-sparkline插件没能成功挂载到jQuery的全局对象上——核心原因是Webpack默认的模块隔离机制：它不会自动把npm模块暴露到全局作用域，而jquery-sparkline这类传统插件，必须依赖全局的$或jQuery才能完成挂载。

你的配置里的问题点 #

1. 重复引用了jquery-sparkline：你在nonTreeShakableModules里同时写了'jquery-sparkline'和具体的文件路径，这会导致重复打包，还没解决全局依赖的核心问题。
2. 没配置Webpack的ProvidePlugin：无法让jQuery成为全局变量，插件找不到挂载的目标。

具体修复步骤 #

1. 清理冗余的模块引用

把nonTreeShakableModules里的.\\node_modules\\jquery-sparkline\\jquery.sparkline.js删掉，只保留'jquery-sparkline'就行——npm包已经帮你处理了正确的入口文件，不用手动指定路径。

2. 添加ProvidePlugin配置

在Webpack配置里通过ProvidePlugin，把jQuery暴露为全局的$和jQuery，这样jquery-sparkline就能自动找到并挂载到它上面。

修改后的webpack.config.vendor.js关键部分如下：

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  const sharedConfig = {
    stats: { "modules": true },
    resolve: { extensions: ['.js'], },
    module: {
      rules: [
        { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
      ]
    },
    // 新增ProvidePlugin配置，把jQuery注入全局
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    output: { publicPath: 'dist/', filename: '[name].js' },
    entry: {
      vendor: allModules
    }
  };

  // 剩下的合并配置逻辑保持不变
  return merge(sharedConfig, /* ...你的其他环境配置 */);
};

3. 确认打包顺序

Webpack会自动处理模块依赖，只要你在allModules里把jquery放在jquery-sparkline前面（你的配置已经做到了），就能保证jQuery先加载，插件后挂载。

额外提醒（针对Angular场景） #

如果是Angular项目，你还可以在使用sparkline的组件里手动导入验证：

import * as $ from 'jquery';
import 'jquery-sparkline';

不过更推荐用上面的全局注入方式，整个项目都能直接用$.sparkline，不用每个组件都重复导入。

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