Skip to main content

Adding a 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, it is highly encouraged you to contribute back your plugin to the Gatsby Plugin Library 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 onCreateWebpackConfig.

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

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

  1. develop: when running the gatsby develop command. Has configuration for hot reloading and CSS injection into page
  2. develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component.
  3. build-javascript: production JavaScript and CSS build. Creates route JS bundles as well as common chunks for JS and CSS.
  4. build-html: production build static HTML pages

Check webpack.config.js for the source.

There are many plugins in the Gatsby repo using this API to look to for examples e.g. Sass, TypeScript, Glamor, and many more!


Here is an example adding an additional global variable via the DefinePlugin and the less-loader:

Absolute imports

Instead of writing import Header from '../../components/header' over and over again you can just write import Header from 'components/header' with absolute imports:

You can always find more information on resolve and other options in the official Webpack docs.

Modifying the Babel loader

You need this if you want to do things like transpile parts of node_modules.

Edit this page on GitHub