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 processyarn run server:watch
(compile server files) andyarn 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 ] }, ) }
‹ Back to article Llist