# @universityofwarwick/webpack-config-builder

> Webpack configuration builder

Latest version **6.0.0** (published 2025-10-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install @universityofwarwick/webpack-config-builder
pnpm add @universityofwarwick/webpack-config-builder
yarn add @universityofwarwick/webpack-config-builder
bun add @universityofwarwick/webpack-config-builder
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2025-10-28 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >22.0.0 |
| Dependencies | 36 |
| Unpacked size | 80.3 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | University of Warwick |
| Maintainers | nickhowes, flamingelk, warwick-goatee, warwick-glasses, lk9100 |

## Links

- npm: https://www.npmjs.com/package/@universityofwarwick/webpack-config-builder
- Repository: https://github.com/UniversityOfWarwick/webpack-config-builder
- Homepage: https://github.com/UniversityOfWarwick/webpack-config-builder#readme
- Issues: https://github.com/UniversityOfWarwick/webpack-config-builder/issues
- npm.io page: https://npm.io/package/@universityofwarwick/webpack-config-builder

## Dependencies (36)

- [less](https://npm.io/package/less.md) ^4.4.1
- [slash](https://npm.io/package/slash.md) 5.1.0
- [eslint](https://npm.io/package/eslint.md) 8.57.1
- [webpack](https://npm.io/package/webpack.md) 5.101.3
- [css-loader](https://npm.io/package/css-loader.md) ^7.1.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.28.4
- [less-loader](https://npm.io/package/less-loader.md) ^12.3.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^6.0.1
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.14
- [babel-loader](https://npm.io/package/babel-loader.md) ^10.0.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^6.0.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^8.2.0
- [webpack-stream](https://npm.io/package/webpack-stream.md) ^7.0.0
- [@babel/register](https://npm.io/package/@babel/register.md) ^7.28.3
- [webpack-notifier](https://npm.io/package/webpack-notifier.md) ^1.15.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.28.3
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.27.1
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) ^3.3.4
- [babel-preset-airbnb](https://npm.io/package/babel-preset-airbnb.md) ^5.0.0
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^13.0.1
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) ^7.0.1
- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) 7.28.4
- [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^4.2.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.14
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.9.4
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.10.2
- [@humanwhocodes/object-schema](https://npm.io/package/@humanwhocodes/object-schema.md) npm:@eslint/object-schema@2.1.6
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^7.0.2
- [moment-locales-webpack-plugin](https://npm.io/package/moment-locales-webpack-plugin.md) ^1.2.0
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [moment-timezone-data-webpack-plugin](https://npm.io/package/moment-timezone-data-webpack-plugin.md) ^1.5.1
- [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) npm:@babel/plugin-transform-numeric-separator@7.27.1
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) npm:@babel/plugin-transform-optional-chaining@7.27.1
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) npm:@babel/plugin-transform-object-rest-spread@7.28.4
- [@babel/plugin-proposal-optional-catch-binding](https://npm.io/package/@babel/plugin-proposal-optional-catch-binding.md) npm:@babel/plugin-transform-optional-catch-binding@7.27.1
- [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) npm:@babel/plugin-transform-nullish-coalescing-operator@7.27.1

## Recent versions

- 6.0.0 (latest) — 2025-10-28
- 5.2.0 — 2024-05-02
- 5.1.2 — 2023-04-27
- 5.1.1 — 2023-04-27
- 5.1.0 — 2023-04-17
- 5.0.0 — 2023-04-17
- 1.0.6 — 2021-01-07
- 1.0.5 — 2020-04-17
- 1.0.4 — 2020-04-01
- 1.0.3 — 2020-03-31
- 1.0.2 — 2020-03-17
- 1.0.1 — 2020-03-17
- 1.0.0 — 2020-03-17

## README

# webpack-config-builder

Reusable builder to tame our Webpack boilerplate.

## Requirements

At least NPM 9 is required. If the Node version you are using has an older version you can run `npm i -g npm@^9`.

Some NPM modules need to be directly installed in your project, because of the way Node dependencies work:

```
npm install -D webpack webpack-cli @babel/core @babel/register @babel/preset-env css-loader less less-loader postcss-loader babel-loader babel-eslint
```

## Vue.js support

If you want to use Vue.js, you need to include `vue-loader` with the above dependencies. Also, you need to provide the builder with the `VueLoaderPlugin` directly (so it can be kept optional for those not using Vue.js):

```js
import { VueLoaderPlugin } from 'vue-loader';
...
    .vue(new VueLoaderPlugin())
    .build();
```

Currently only tested with Vue.js v3.

## Known issues

The current version of the eslint plugin is only compatible with eslint 8. [Issue][eslint-9-issue]

## Example `webpack.config.babel.js`

There are various options - there should be enough JSDoc coming from the module that once you have created a builder instance you will get completion hints about what methods you can call.

```js
import * as builder from '@universityofwarwick/webpack-config-builder';

export default builder.create().playApp()
  .jsEntries({
      admin: './app/assets/js/admin.ts',
      render: './app/assets/js/render.ts',
  })
  .cssEntries({
      style: './app/assets/css/main.less',
      admin: './app/assets/css/admin.less',
  })
  // adjust depending on your needs
  .momentTimezonesFrom(2020)
  .momentTimezonesLondonOnly()
  .addBrowserLevel({ id: 'modern', suffix: '-modern',
    babelTargets: {
      chrome: '110',
      edge: '110',
      firefox: '110',
      safari: '15.0',
      samsung: '15.0',
    }
  })
  .copyModule('@universityofwarwick/id7', 'dist', 'lib/  id7')
  .copyModule('@fortawesome/fontawesome-pro','webfonts', 'lib/fontawesome-pro/webfonts')
  .build();
```

[eslint-9-issue]: https://github.com/webpack-contrib/eslint-webpack-plugin/issues/251

---
_Source: https://npm.io/package/@universityofwarwick/webpack-config-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._