Page History

Webpack

For building the swat web-ui, webpack is used.

Webpack configuration

The following diagram illustrates the configuration structure used for webpack:

Image Added

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:

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:

Image Added