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:
Build output
When running webpack, the source files are outputted as of follow:
The bundles are then included in the index.html:
index.html
<!-- ... -->
<head>
<!-- ... -->
<link rel="stylesheet" href="swat.vendor.css">
<link rel="stylesheet" href="swat.bundle.css">
<!-- ... -->
<script type="text/javascript" src="swat.vendor.js"></script>
<script type="text/javascript" src="swat.bundle.js"></script>
<!-- ... -->
</head>
<!-- ... -->