Extending the webpack configuration

We use webpack for bundling all assets. The webpack configurations can be found in either paas/catwalk or <customer>/frontastic/catwalk/config dependoing on your setup. Our base webpack configuration is in the webpack.js file in this folder and can then be extended by the modules in <customer>/frontastic/catwalk/config/webpack/ for the respective target environments:

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

When changing the webpack configuration you must restart the webpack services, because these changes aren't detected automatically. To do this, Frontastic CLI has to be restarted. Stop it using CTRL-C and start it again as usual with frontastic run.

For debugging you can also stop these services and run all commands manually. For this, enter the project directory 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, it will be applied to all builds listed above and 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