> ## Documentation Index
> Fetch the complete documentation index at: https://help.pixwel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Webpack

> How the ui/3x front end is built, served, and bundled with Webpack.

The current front end (`ui/3x`, package `pixwel-ui`) is built with **Webpack 5**. It replaces the Gulp pipeline the legacy AngularJS UI used.

<Note>
  Work in `ui/3x` with **pnpm** — its `engines` field says npm, but `npm install` fails there. Install dependencies with `pnpm install`.
</Note>

## Common commands

Run these from `ui/3x`:

| Command          | What it does                                                                                                                                                        |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `pnpm start`     | Start the Webpack dev server on port **9000**.                                                                                                                      |
| `pnpm start:dev` | Dev server with `DEV=true`, opening a browser.                                                                                                                      |
| `pnpm build:ci`  | Production build (`CI=true webpack build`).                                                                                                                         |
| `pnpm serve:ci`  | Serve a prebuilt bundle from `../dist` (i.e. `ui/dist`) on port **9000**. Note: `build:ci` outputs to `ui/3x/dist`, so the build must be placed at `ui/dist` first. |
| `pnpm lint`      | ESLint + Stylelint over the source.                                                                                                                                 |
| `pnpm test`      | Jest with coverage — see [UI testing](/ui/testing).                                                                                                                 |
| `pnpm storybook` | Storybook on port 6006.                                                                                                                                             |

The dev server is reached at `https://development.pixwel.com:9000`.

## How the build is configured

The build is defined in `ui/3x/webpack.config.js`:

* **Entry** — `index.js`.
* **Output** — hashed bundles (`js/[name].[contenthash].js`) with `publicPath: '/'`, written to the `dist/` directory.
* **Dev server** — runs on port 9000 with `historyApiFallback` for client-side routing and a `proxy` to the API.
* **Styles** — SCSS compiled with `sass-loader`.
* **JavaScript** — transpiled with Babel.

Key plugins:

* **`HtmlWebpackPlugin`** — generates `index.html` from a template.
* **`CopyWebpackPlugin`** — copies static assets into the build.
* **`ProvidePlugin` / `DefinePlugin`** — inject globals and `process.env.NODE_ENV`.
* **`@sentry/webpack-plugin`** — uploads source maps to Sentry for error tracking.

`mode` is `development` for the dev server and `production` for `build:ci`.