Webpack

For building the swat-webui, webpack is used.

Webpack configuration

The following diagram illustrates the configuration structure used for webpack:

Build.One Documentation > SWAT build process > swat-webpack-config.png

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:

Build.One Documentation > SWAT build process > swat-webpack-config2.png

Build output

When running webpack, the source files are outputted as of follow:

Build.One Documentation > SWAT build process > swat webpack outputting.png

The bundles are then included in the 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>
<!-- ... -->