Webpack 4配置SplitChunksPlugin拆分代码块异常问题求助

问题描述 #

我在Webpack 3时就不太擅长创建公共代码块，到了Webpack 4更是一头雾水。我现在的需求是为WordPress主题管理JavaScript依赖，只有一个入口点app.js，里面包含多个模块，其中部分模块只在特定页面使用。

我想要实现三个目标：

• 把仅在产品页使用的slick slider这类模块打包成独立代码块；
• 将node_modules里的其他公共模块（比如jquery）打包到vendor.js；
• 剩下的业务代码打包到app.js。

但目前我的配置只生成了app、slick、simplebar这三个包，vendor.js根本没生成，请问我的配置哪里出问题了？

当前Webpack配置 #

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  // Where to start bundling
  entry: {
    app: "./js/assets/src/app.js",
  },
  // Where to output
  output: {
    // Output to the same directory
    path: __dirname + '/js/assets/dist',
    // Capture name from the entry using a pattern
    filename: "[name].[chunkhash].js",
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "initial",
          priority: -10,
          reuseExistingChunk: true,
        },
        simplebar: {
          test: /[\\/]node_modules[\\/]simplebar[\\/]/,
          name: "simplebar",
          chunks: "all",
        },
        slick : {
          test: /[\\/]node_modules[\\/]slick-carousel[\\/]/,
          name: "slick",
          chunks: "all",
        },
      },
    },
  },
  // How to resolve encountered imports
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader', options: 'jQuery'
        },{
          loader: 'expose-loader', options: '$'
        }]
      }
    ],
  },
  devtool: 'source-map',
  // What extra processing to perform
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
    new CleanWebpackPlugin(['js/assets/dist']),
    new UglifyJSPlugin({ sourceMap: true }),
    new BundleAnalyzerPlugin({ analyzerMode: 'static' })
  ],
  // Adjust module resolution algorithm
  resolve: {},
};

问题分析与修复方案 #

嘿，我来帮你拆解下问题所在，以及怎么修复：

1. 核心问题：splitChunks配置的优先级与chunk范围设置 #

你的commons（对应vendor）配置有两个关键问题：

• chunks: "initial"：这个设置只匹配初始加载的chunk，但你只有一个入口app，且其他cacheGroups（slick、simplebar）的优先级默认比commons高（你给commons设了priority: -10，而其他两个没设，默认是0），导致node_modules里的剩余模块（比如jquery）没被正确捕获拆分。
• 缺少enforce: true：如果剩余公共模块体积较小，Webpack可能会跳过拆分，加上这个配置可以强制生成vendor chunk。

2. 优化后的optimization配置 #

把commons重命名为vendor更直观，同时调整配置参数：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendor",
        chunks: "all", // 匹配所有类型的chunk（初始+异步）
        priority: -10,
        reuseExistingChunk: true,
        enforce: true, // 强制生成该chunk，不受体积阈值影响
      },
      simplebar: {
        test: /[\\/]node_modules[\\/]simplebar[\\/]/,
        name: "simplebar",
        chunks: "all",
        priority: 0, // 优先级高于vendor，确保先匹配simplebar模块
        reuseExistingChunk: true,
      },
      slick : {
        test: /[\\/]node_modules[\\/]slick-carousel[\\/]/,
        name: "slick",
        chunks: "all",
        priority: 0, // 同样设置高于vendor的优先级
        reuseExistingChunk: true,
      },
    },
  },
},

3. 确保特定页面模块的正确引入方式 #

你提到slick等模块仅在产品页使用，建议用动态导入（import()）来引入，而不是同步引入，这样Webpack才会把它们拆分成独立的chunk，且只有在对应页面才会加载：

// 在app.js中添加判断，仅在产品页加载slick
if (document.body.classList.contains('product-page')) {
  // 动态导入slick，Webpack会自动拆分为独立chunk
  import('slick-carousel').then(() => {
    // 初始化slick轮播
    $('.product-slider').slick();
  });
}

如果是同步引入的话，模块会被打包进入口或vendor，不符合“仅特定页面使用”的需求。

4. 验证打包结果 #

修改配置后重新运行Webpack，你应该会看到生成vendor.[chunkhash].js、app.[chunkhash].js、slick.[chunkhash].js、simplebar.[chunkhash].js这几个文件。可以通过BundleAnalyzerPlugin生成的报告，确认jquery等公共模块是否被正确打包进vendor.js。

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