Extending the webpack Configuration

We use webpack for bundling all assets. The webpack configurations can be found in .../catwalk/config. Our base webpack configuration in .../catwalk/config/webpack.js which can then be extended by the modules in .../catwalk/config/webpack/ for the respective target environments:

• Browser / Development: .../catwalk/config/webpack.browser.development.js
• Browser / Production: .../catwalk/config/webpack.browser.production.js
• Server / Development: .../catwalk/config/webpack.server.development.js
• Server / Production: .../catwalk/config/webpack.server.production.js

The Catwalk files can either be found in paas/catwalk or <customer>/frontastic/catwalk depending on your setup. When changing the webpack configuration you must restart the webpack services, because these changes aren't detected automatically. You can do this for a single Project by running inside the container/VM:

$ sudo supervisorctl restart <customer>-<project>:

This will restart all webpack services for your Project. An example for the customer demo with the Project english would be: sudo supervisorctl restart demo-english:.

For debugging you can also stop these services and run all commands manually. For this, enter the Project directory inside the container / VM and use the following commands:

• yarn run start to start the development browser webpack process
• yarn run server:watch (compile server files) and yarn run server:start (run server) to start the development server webpack processes.
• yarn run build browser to build the production browser build (and gather build size statistics)
• yarn run build server to build the production server build

Customize Main Config

You can modify the generic webpack configuration using a config/webpack.js inside your Project folder (something like <customer>_<project>/config/webpack.js). The modification file must export a function modifying the webpack configuration. We suggest using webpack-merge for this:

const merge = require('webpack-merge')

module.exports = (config, PRODUCTION, SERVER) => {
     return merge.smart(
	config,
	{
	     plugins: [
		// My additional plugin
	     ]
	},
     )
}

Since this is "just" a JavaScript function and it will be applied to all builds listed above. This modification happens before our own build target specific customizations are applied.

The variables PRODUCTION and SERVER will be true/false depending on the build type.

Customize Single Build Target

You can also modify the webpack configuration for just one build target, by creating a file like <customer>_<project>/config/webpack.{browser,server}.{development,production}.js. The file should look exactly like the one above and will only be applied to this build target and after all other customizations are applied. It could also just return an entirely custom webpack configuration:

const merge = require('webpack-merge')

module.exports = (config) => {
     return merge.smart(
	config,
	{
	     plugins: [
		// My additional plugin
	     ]
	},
     )
}

Next Article ›

Retrieving Custom Data