Extending Webpack

Stability

We are using webpack for bundling all assets. The webpack configurations we are using can be found in paas/catwalk/config. There is our base webpack configuration in paas/catwalk/config/webpack.js which is extended by the modules in paas/catwalk/config/webpack/ for the respective target environments:

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

When changing the webpack configuration you must restart the webpack services, because those changes are not 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 englsih would be: sudo supervisorctl restart demo-english:.

For debugging you can also stop those 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 customize / extend the webpack configuration by two means.

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

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 also just return an entirely custom webpack configuration:

const merge = require('webpack-merge')

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