• Description
• Webpack
• Webpack configuration
• RawBundlerPlugin
• Copy-webpack-plugin
• Build output

Description

Webpack

For building the swat-webui, Webpack is used.

Webpack configuration

The following diagram illustrates the configuration structure used for Webpack:

RawBundlerPlugin

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

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 output

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

The bundles are then included in the index.html:

Back to Documentation

Back to Home Page