Webpack

Webpack is a free, open-source tool that bundles JavaScript, CSS, and images for websites. It’s used to create static assets that serve content to a browser.

For its build process, WordPress uses webpack. You’ll find it in the @wordpress/scripts package, which gets output alongside the blocks that come from the @wordpress/create-block package.

in development: there are currently two files to try to have one file that had config values unique to that repo, and one webpack file that might end up getting moved to an id-build-tools kind of repo and imported that way instead.

Both the theme starter and plugin starter have 2 files in the root folder that allow you to customize your build:

webpack.config.js

This file extends the default wp-scripts webpack config file. Code here is merged with the default rules using the package webpack-merge.

There are many ways to configure webpack. Some of the settings we are using at the time of this writing are outlined below:

• module determines how the different types of modules within a project will be treated.
• rules modify how the module is created. They can apply loaders to the module, or modify the parser.
• stats lets you precisely control what bundle information gets displayed.
• devtool controls if and how source maps are generated.
• entry is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.
• plugins is used to customize the webpack build process in a variety of ways.

When you run a build, webpack will run twice: the first time to build blocks, the second to build all other scripts and styles.

webpack.customizations.js

Developers can make changes to the entry points and paths listed in this file to load new assets from node packages or to add new stylesheets to be compiled by webpack. Further instructions can be found in the file comments.

Terminal Output

The stats option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you don’t want to use quiet or noInfo because you want some bundle information, but not all of it.

Here are some examples of different outputs: