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)
gatsby-node.js file in your root directory. Inside this file, export a function called
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 developcommand. 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
Check webpack.config.js for the source.
Here is an example adding support for flexboxgrid when processing css files.