Ignoring Moment.js Locales with Webpacker

There's a slight pain point when loading Moment.js through Webpack in that it pulls in every single locale available, regardless of whether you use it or not which adds to the file size substantially. It's something that's likely to be fixed in a new major release of Moment or it's follow up Luxon but luckily it's pretty easy to resolve now.

In your config/webpack/environment.js file you can instruct Webpacker to use an ignore plugin which will ignore loading any locale files in the context of Moment.

const { environment } = require("@rails/webpacker");
const webpack = require("webpack");

environment.plugins.insert(
  "IgnorePlugin",
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
);

module.exports = environment;