Webpack
For building the swat web-ui, webpack is used.
Webpack configuration
The following diagram illustrates the configuration structure used for webpack:
RawBundlerPlugin wrapped by legacyBundler is used for bundling legacy js files (which were previously imported using <script> tags directly in the index.html) that require global scope access.
copy-webpack-plugin wrapped by copyPlugin is used for static files / artifacts that require copying over (eg. images).
Example depicting code snippet of webpack.config.js:
webpack.config.js
module.exports = { mode: 'development', entry: './akioma/app.js', output: { filename: 'akioma-swat.bundle.js', path: path.resolve(__dirname, outputPath), }, plugins: [ legacyBundler(), copyPlugin(), ] };
By further expanding upon legacyBundler and copyPlugin plugins, used by webpack.config.js, we see the following config file structure: