Modify a rule from your Gatsby site's webpack config

gatsby-node.js

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  // inline files that are smaller than this (in bytes), Gatsby's default vaule is 10000
  const LIMIT = 2000;

  // find patterns from gatsby/src/utils/webpack-utils.js
  // https://github.com/gatsbyjs/gatsby/blob/03ddfdf9b6f5a132fe82c202c95829f6f42cd40b/packages/gatsby/src/utils/webpack-utils.js#L288-L435
  // for fonts instead of images, use: /\.(eot|otf|ttf|woff(2)?)(\?.*)?$/
  const PATTERN = /\.(ico|svg|jpg|jpeg|png|gif|webp)(\?.*)?$/;

  const config = getConfig();
  const newConfig = {
    ...config,
    module: {
      // Manually swap out the rule who's test matches PATTERN
      rules: config.module.rules.map(rule => {
        if (rule.test && rule.test.toString() === PATTERN.toString()) {
          rule.use[0].options.limit = LIMIT;
        }
        return rule;
      })
    }
  };

  actions.replaceWebpackConfig(newConfig);
};