Part Three

Add custom webpack config

Before creating custom webpack configuration, check to see if there’s a Gatsby
plugin already built that handles your use case in the plugins section.
If there’s not yet one and your use case is a general one, we highly encourage
you to contribute back your plugin to the Gatsby repo so it’s available to
others (including your future self 😀).

To add custom webpack configurations, create (if there’s not one already)
a gatsby-node.js file in your root directory. Inside this file, export a function called modifyWebpackConfig.

When Gatsby creates its webpack config, this function will be called allowing you to modify the default
webpack config using webpack-configurator.

Gatsby does multiple webpack builds with somewhat different configuration. We
call each build type a “stage”. The following stages exist:

develop: when running the gatsby develop command. Has configuration for hot reloading and CSS injection into page

develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component.

build-css: production build of CSS

build-html: production build static HTML pages

build-javascript: production JavaScript build. Creates route bundles as well as a commons and app bundle.