Bridgetown's new webpack CLI tool

posted by Ayush Newatia
1 June, 2021



Bridgetown v0.21 includes a new CLI tool to manage Webpack so any improvements and updates to the Webpack config in later Bridgetown versions can be applied easily.

# To view all available options
bundle exec bridgetown webpack

To avoid hiding a default webpack config in a gem or npm package; the config was split into two files: config/webpack.defaults.js and webpack.config.js.

webpack.defaults.js contains the base Webpack configuration provided by Bridgetown. webpack.config.js just requires webpack.defaults.js and re-exports it; allowing any user additions or overrides to be made before it’s exported.

If you’ve already got a Bridgetown site, you can setup this new two file system by running:

bundle exec bridgetown webpack setup

THIS WILL OVERWRITE YOUR EXISTING WEBPACK CONFIGURATION!

Newer versions of Bridgetown might contain improvements to webpack.defaults.js; you can optionally pull in these changes by running:

bundle exec bridgetown webpack update

This way, any updates are not forced upon you as a Bridgetown user and you’re free to keep using an older configuration if you prefer!

You can also swap Sass for PostCSS by running:

bundle exec bridgetown webpack enable-postcss

This feature tightens up the integration between Bridgetown and Webpack without hiding any of the wires from the user.