How to correctly use Webpack's CommonsChunkPlugin with multiple entry points?

Question

I'm having a problem with maintaining stable module IDs for my explicit vendor chunk. Here's my setup (modeled after SurviveJS ):

const gitrev = require('git-rev-sync');
const path = require('path');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');

const packageJson = require('./package.json');

const gulpPaths = require('./gulp/lib/gulp_paths');

module.exports = {
  context: __dirname,
  entry: {
    vendor: Object.keys(packageJson.dependencies),
    web: path.join(
      __dirname,
      gulpPaths.SCRIPT_SOURCE_DIR,
      gulpPaths.SCRIPT_BUNDLE_SOURCE_FILE
    ),
//    server: path.join(
//      __dirname,
//      gulpPaths.SCRIPT_SOURCE_DIR,
//      gulpPaths.SCRIPT_SERVER_SIDE_SOURCE_FILE
//    ),
  },
  output: {
    path: path.join(__dirname, gulpPaths.SCRIPT_OUTPUT_DIR),
    filename: '[name]_bundle.js',
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: false,
      __TEST__: false,
      __COMMIT__: JSON.stringify(gitrev.long()),
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
      minChunks: Infinity,
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        exclude: /node_modules/,
      },
      { // Turn off AMD module loading on eventemitter2
        test: /eventemitter2/,
        loader: 'imports?define=>false',
      }
    ]
  },
};

It works pretty well; I can ride back and forth through my repository history, and the vendor chunk changes only if the vendor libraries actually change in node_modules . However, once I uncomment the additional entry point, everything changes: the vendor chunk changes without any changes to the vendor libraries. If I manually whitelist only a couple of libraries, it helps, but doesn't remove the problem entirely. It looks like it also conflicts the same way with DedupePlugin and OccurenceOrderPlugin.

I also tried to use the approaches outlined in the Webpack documentation ( recordsPath and ChunkManifestPlugin, without luck).

I wouldn't split hair over this, since the server entry point is anyway a failed experiment in server-side rendering and should probably be removed; however, soon I'm going to have multiple entry points anyway, for more fine-tuning of the page loading time, and it's probably going to get funny.

Answer 1

As advised by Juho Vepsäläinen, the best option for me was using the NamedModulesPlugin . For the record, the HashModuleIds plugin is also worth looking at, but it's only available in Webpack 2.