Webpack集成SammyJS遇jQuery依赖问题，求精简Bundle方案

我来帮你搞定这个问题，先分析下当前配置的核心问题，再给出可行的解决方案和体积优化建议：

一、当前配置的核心问题 #

你在ProvidePlugin里声明Sammy: 'Sammy'其实没触碰到本质——SammyJS的源码是依赖全局环境中的jQuery/$变量，而不是需要把Sammy本身全局化。虽然你已经配置了jQuery的全局注入，但Sammy模块加载时没正确捕获到这个全局变量，才导致报错。

另外，webpack配置文件里的const jquery = require('jquery')和const Sammy = require('sammy')是多余的，这些不需要在配置文件里提前引入，Webpack会通过模块解析自动处理它们。

二、正确的配置方案 #

我们可以通过imports-loader给Sammy模块注入它需要的jQuery依赖，同时保留ProvidePlugin的jQuery配置确保全局可用，步骤如下：

1. 安装依赖 #

首先安装imports-loader（用于给第三方模块注入依赖变量）：

npm install imports-loader --save-dev

2. 修改Webpack配置 #

更新你的配置文件，调整module.rules和plugins：

const webpack = require('webpack')
const {resolve} = require('path')

const webpackConfig = {
  entry: "./src/js/bootstrap.js",
  output: {
    path: resolve("dist"),
    filename: "bundle.js",
    publicPath: '/dist/'
  },
  // 保留jQuery的全局注入配置，确保其他依赖也能用到全局jQuery
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // 给Sammy模块注入jQuery依赖，让它能找到需要的变量
      {
        test: require.resolve('sammy'),
        loader: 'imports-loader',
        options: {
          imports: [
            'default jquery $',
            'default jquery jQuery'
          ]
        }
      }
    ]
  },
  resolve: {
    alias: {
      graph: resolve(__dirname, 'src/modules/graph'),
    }
  },
  // 开启production模式自动优化（可选但强烈推荐）
  mode: 'production'
};

module.exports = webpackConfig;

这个配置的作用是：当Webpack处理Sammy模块时，自动在模块顶部注入$和jQuery变量，让Sammy能找到它需要的依赖；同时ProvidePlugin确保jQuery在全局环境也可用，兼容其他可能依赖全局jQuery的代码。

三、精简Bundle体积的额外建议 #

如果你想进一步减小Bundle体积，可以试试这些方法：

• 代码分离：用SplitChunksPlugin把第三方依赖（比如jQuery、Sammy）和业务代码拆分，既减小主Bundle体积，又利于浏览器缓存。在配置里添加：

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
  

  这样会把node_modules里的依赖打包到单独的vendors.js文件中，主Bundle只包含你的业务代码。

• 启用Production模式：上面配置里的mode: 'production'会自动开启Tree Shaking（移除未使用的代码）、代码压缩等优化，能显著减小Bundle体积。

• 检查依赖必要性：确认SammyJS是否是项目必须的，有没有更轻量的替代方案（比如现代的路由库），从根源减少依赖体积。

内容的提问来源于stack exchange，提问作者Joshua San Jose