{"id":412,"date":"2025-01-10T13:37:10","date_gmt":"2025-01-10T18:37:10","guid":{"rendered":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/?page_id=412"},"modified":"2025-02-20T13:52:14","modified_gmt":"2025-02-20T18:52:14","slug":"webpack-config-js","status":"publish","type":"page","link":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/handbook\/bu-tools\/webpack-config-js\/","title":{"rendered":"Webpack"},"content":{"rendered":"\n

Webpack<\/a> 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.<\/p>\n\n\n\n

For its build process, WordPress uses webpack. You\u2019ll find it in the @wordpress\/scripts package, which gets output alongside the blocks that come from the @wordpress\/create-block package.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Both the theme starter and plugin starter have 2 files in the root folder that allow you to customize your build: <\/p>\n\n\n\n

webpack.config.js<\/h2>\n\n\n\n

This file extends the default wp-scripts webpack config file<\/a>. Code here is merged with the default rules using the package webpack-merge<\/code>.<\/p>\n\n\n\n

There are many ways to configure webpack. Some of the settings we are using at the time of this writing are outlined below:<\/p>\n\n\n\n