Which plugin should keep only needed moment.js locales: IgnorePlugin or ContextReplacementPlugin?

Short answer

For a small, stable locale set, ContextReplacementPlugin is the better fit. It narrows moment's locale context module with a whitelist regex in your webpack config, so the matching locales stay in the bundle automatically and your application code needs no changes. IgnorePlugin is the better choice when locales are added or removed frequently, because it forces every locale to be an explicit, visible import in source code — making additions opt-in rather than dependent on someone remembering to update a regex.

Why the trade-off works this way

Both plugins attack the same problem: moment loads locales via a dynamic require, which webpack converts into a context module containing every locale file. The difference is where the maintenance burden lands.

• ContextReplacementPlugin keeps the "automatic" behavior but filters it. One regex in webpack.config.js controls everything. With two or three locales that never change, you write the regex once and never touch it again. The risk: if a new locale is needed later and the regex isn't updated, that locale is silently missing from the bundle — a runtime formatting failure, not a build error.
• IgnorePlugin (webpack 5: an options object with resourceRegExp and contextRegExp) blocks moment's locale requires entirely. Each locale you need must be imported explicitly, e.g. import 'moment/locale/fr';. Bundle size is minimal by construction, and every locale addition shows up in code review as a deliberate change. The cost is touching source files and risking a runtime error if someone formats a date in a locale nobody imported.

So the decision rule is: stable set → config-side filtering (ContextReplacementPlugin); churning set → code-side explicit imports (IgnorePlugin), where each addition is auditable.

Example configuration

// webpack.config.js (webpack 5)
const webpack = require('webpack');

// Option A: keep only en, fr, de in the locale context
new webpack.ContextReplacementPlugin(
  /moment[/\\]locale$/,
  /en|fr|de/
);

// Option B: drop all locales, import them explicitly in app code
new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/,
  contextRegExp: /moment$/
});

Test the exact regexes against your webpack and moment versions — path separators and context paths differ between Windows and POSIX builds, and moment vs moment-timezone have different locale paths.

Verifying nothing slipped back in

There is no built-in webpack switch that fails the build on unexpected locales, but two practical checks work well:

1. Bundle inspection: run webpack-bundle-analyzer (or grep the emitted bundle for moment/locale/) in CI and assert only the expected locale modules appear. A simple grep-based CI step is the closest thing to a build-time guard.
2. Runtime assertion: in a smoke test, call moment.locales() and compare the result against your expected list. This catches both over-inclusion (regex too broad) and under-inclusion (missing explicit import).

Note that both plugins are webpack-specific; if you migrate to Vite or Rollup you'll need their equivalents. Also, if you're early enough in the project, consider whether a modern alternative (date-fns, Day.js, Luxon, or the native Intl API) with tree-shakeable locale imports removes the problem entirely — moment itself is in maintenance mode.