PHPackages                             studiometa/webpack-config - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. studiometa/webpack-config

ActiveLibrary

studiometa/webpack-config
=========================

PHP Helpers for @studiometa/webpack-config

6.3.6(11mo ago)413.1k↓40.5%1[8 PRs](https://github.com/studiometa/webpack-config/pulls)1MITJavaScriptPHP ^7.3|^8.0CI failing

Since Oct 25Pushed 2mo ago10 watchersCompare

[ Source](https://github.com/studiometa/webpack-config)[ Packagist](https://packagist.org/packages/studiometa/webpack-config)[ RSS](/packages/studiometa-webpack-config/feed)WikiDiscussions develop Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (55)Used By (1)

@studiometa/webpack-config
==========================

[](#studiometawebpack-config)

[![NPM Version](https://camo.githubusercontent.com/3486e407b1a56c70d4a0940b897054cce3ccb1f0eca8ba34ecb36e65fcee09e2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4073747564696f6d6574612f7765627061636b2d636f6e6669672e7376673f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://www.npmjs.com/package/@studiometa/webpack-config/)[![Downloads](https://camo.githubusercontent.com/b53e98d30feed24ea85358147358ee998226b2e2e534ae270a26d943c29f64f9/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f4073747564696f6d6574612f7765627061636b2d636f6e6669673f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://www.npmjs.com/package/@studiometa/webpack-config/)[![Size](https://camo.githubusercontent.com/a5493ff4b282f3ccd248626e87e17b50eed5420b9d079282033b08494a3980f1/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f756e7061636b65642d73697a652f25343073747564696f6d6574612532467765627061636b2d636f6e6669673f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533266c6162656c3d73697a65)](npmjs.com/package/@studiometa/webpack-config)[![Dependency Status](https://camo.githubusercontent.com/7eacc1a663a70dda54b74a284a1bc6fb85e0d86d5864463f76f152e6aeba25f4/68747470733a2f2f696d672e736869656c64732e696f2f6c6962726172696573696f2f72656c656173652f6e706d2f4073747564696f6d6574612f7765627061636b2d636f6e6669673f7374796c653d666c617426636f6c6f72423d33653633646426636f6c6f72413d343134383533)](https://david-dm.org/studiometa/webpack-config)

> Minimal configuration to run a development server and build your assets with Webpack.

Installation
------------

[](#installation)

Install the package in your project:

```
npm install --save-dev @studiometa/webpack-config
```

Usage
-----

[](#usage)

Create a `meta.config.js` file at the root of yout project:

```
// meta.config.mjs
import { defineConfig } from '@studiometa/webpack-config';
import { twig, yaml, tailwindcss, prototyping, eslint, stylelint, hash, https } from '@studiometa/webpack-config/presets';
import { vue } from '@studiometa/webpack-config-preset-vue-3';

export default defineConfig({
  src: [
    './path/to/src/js/*.js',
    './path/to/src/css/*.scss',
  ],
  dist: './path/to/dist',
  public: '/path/to/dist',

  /**
   * Define which target to use when creating the bundle.
   * An array of targets will create a bundle for each target.
   * Defaults to `legacy`.
   *
   * @type {'modern'|'legacy'|Array}
   * @optional
   */
  target: ['modern', 'legacy'],

  /**
   * Analyze the bundle with the WebpackBundleAnalyzer plugin.
   * @type {Boolean}
   * @optional
   */
  analyze: false,

  /**
   * Merge all initial CSS chunks into one file.
   * Use a RegExp or a function to exclude some files:
   * ```js
   * mergeCSS: /^(?!.*css\/do-not-merge\.scss).*$/,
   * mergeCSS(module, chunk) {
   *   return module.constructor.name === 'CssModule';
   * },
   * ```
   * @type {Boolean|RegExp|Function}
   * @optional
   */
  mergeCSS: false,

  /**
   * Extends the Webpack configuration before merging
   * with the environment specific configurations.
   * @type {Function}
   * @optional
   */
  webpack(config, isDev) {},

  /**
   * Extends the development Webpack configuration.
   * @param {WebpackConfig} devConfig The Webpack development config.
   * @type {Function}
   * @optional
   */
  webpackDev(devConfig) {},

  /**
   * Extends the production Webpack configuration.
   * @param {WebpackConfig} devConfig The Webpack production config.
   * @type {Function}
   * @optional
   */
  webpackProd(prodConfig) {},

  /**
   * Configure the `sass-loader` options.
   * @type {Objet}
   * @optional
   * @see https://github.com/webpack-contrib/sass-loader#sassoptions
   */
  sassOptions: {},

  /**
   * Configure the browserSync server if you do not use a proxy by setting
   * this property to `true` or a BrowserSync server configuration object.
   * If the property is a function, it will be used to alter the server
   * configuraton and instance in proxy mode.
   * @see https://browsersync.io/docs/options#option-server
   * @type {Boolean|Object|Function}
   * @optional
   */
  server: true,
  server(bsConfig, bs) {},

  /**
   * Watch for file changes in dev mode and:
   * - reload the browser
   * - or execute a callback
   * @see https://browsersync.io/docs/api#api-watch
   * @type {Array}
   * @optional
   */
  watch: [
    // Watch for changes on all PHP files and reload the browser
    '*.php',
    // Watch for all events on all HTML files and execute the callback
    [
      '*.html',
      (event, file, bs, bsConfig) => {
        if (event === 'change') {
          bs.reload();
        }
      },
    ],
  ],

  /**
   * Use presets to apply pre-made configurations.
   * @type {Array}
   * @optional
   */
  presets: [
    eslint(), // use the `eslint` preset
    stylelint(), // use the `stylelint` preset
    twig(), // use the `twig` preset
    tailwindcss(), // use the `tailwindcss` preset,
    yaml(), // use the `yaml` preset,
    vue(), // use the Vue 3 preset,
    hash(), // use the content hash preset
    https(), // use the https preset
    {
      name: 'my-custom-preset',
      handler(metaConfig, { extendWebpack, extendBrowsersync, isDev }) {
        // ...
      },
    },
  ],
};
```

Configure a `.env` file with one of the following variable defining your application domain to use for the proxy:

```
APP_HOST=local.fqdn.com
APP_HOSTNAME=local.fqdn.com
APP_URL=https://local.fqdn.com
```

You can then start the development server:

```
node_modules/.bin/meta dev
```

Or watch for changes to build you assets:

```
node_modules/.bin/meta watch
```

And build your assets for production:

```
node_modules/.bin/meta build
```

You can analyze your bundle(s) with the `--analyze` (or `-a`) argument:s

```
node_modules/.bin/meta build --analyze
```

Features
--------

[](#features)

- Raw imports with the `?raw` query
- SVG to Vue component with the `?as-vue-component` (requires a [vue preset](#vue))

Presets
-------

[](#presets)

Presets can be used to extend the CLI configuration elegantly. The following presets are shipped with the package and can be used without installing any more dependencies:

- [`eslint`](#eslint)
- [`stylelint`](#stylelint)
- [`twig`](#twig)
- [`tailwindcss`](#tailwindcss)
- [`yaml`](#yaml)
- [`vue`](#vue)
- [`hash`](#hash)
- [`https`](#https)

Read their documentation below to find out how to use and configure them.

Custom presets can be used by using the path of a JS file (relative to the `meta.config.js` file):

```
// meta.config.mjs
import { defineConfig } from '@studiometa/webpack-config';
import myPreset from './my-preset.mjs';

export default defineConfig({
  presets: [
    myPreset({ option: true })
  ],
})

// my-preset.mjs
export default function myPreset(options) {
  return {
    name: 'my-preset',
    async handler(metaConfig, { extendWebpack, isDev }) {
      metaConfig.public = 'auto';
      await extendWebpack(metaConfig, async (webpackConfig) => {
        webpackConfig.optimization.minimize = false;
      });
    }
  }
}
```

### `eslint`

[](#eslint)

Add ESLint validation with [`eslint-webpack-plugin`](https://github.com/webpack-contrib/eslint-webpack-plugin).

#### Options

[](#options)

The options object is directly passed to the `ESLintPlugin` constructor, see [the package documentation](https://github.com/webpack-contrib/eslint-webpack-plugin#options) for details.

#### Examples

[](#examples)

Use it without configuration:

```
import { defineConfig } from '@studiometa/webpack-config';
import { eslint } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [eslint()],
});
```

Or pass custom options:

```
import { defineConfig } from '@studiometa/webpack-config';
import { eslint } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [
    eslint({
      fix: false,
    }),
  ],
});
```

### `stylelint`

[](#stylelint)

Add StyleLint validation with [`stylelint-webpack-plugin`](https://github.com/webpack-contrib/stylelint-webpack-plugin).

#### Options

[](#options-1)

The options object is directly passed to the `StylelintPlugin` constructor, see [the package documentation](https://github.com/webpack-contrib/stylelint-webpack-plugin#options) for details.

#### Examples

[](#examples-1)

Use it without configuration:

```
import { defineConfig } from '@studiometa/webpack-config';
import { stylelint } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [stylelint()],
});
```

Or pass custom options:

```
import { defineConfig } from '@studiometa/webpack-config';
import { stylelint } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [
    stylelint({
      fix: false,
    }),
  ],
});
```

### `twig`

[](#twig)

Add the `twig-html-loader` to the Webpack configuration.

#### Options

[](#options-2)

The options object is directly passed to the [`twig-html-loader`](https://github.com/radiocity/twig-html-loader#options).

#### Examples

[](#examples-2)

Use it without configuration:

```
import { defineConfig } from '@studiometa/webpack-config';
import { twig } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [twig()],
});
```

Or configure the loader options:

```
import { defineConfig } from '@studiometa/webpack-config';
import { twig } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [
    twig({
      debug: true,
    }),
  ],
});
```

### `tailwindcss`

[](#tailwindcss)

Add [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) to the [PostCSS](https://github.com/postcss/postcss) configuration and enable a preview of your Tailwind configuration in dev mode with [`tailwind-config-viewer`](https://github.com/rogden/tailwind-config-viewer).

#### Options

[](#options-3)

- `path` (`String`): the absolute path to the Tailwind CSS entry file

#### Examples

[](#examples-3)

Use it without configuration:

```
import { defineConfig } from '@studiometa/webpack-config';
import { tailwindcss } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [tailwindcss()],
});
```

If the `meta` CLI fails to resolve the `tailwindcss` package, specify its path:

```
import path from 'node:path';
import { defineConfig } from '@studiometa/webpack-config';
import { twig } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [
    tailwindcss({
      path: path.resolve('./node_modules/tailwindcss/lib/index.js'),
    }),
  ],
});
```

The default route for the Tailwind config viewer is `/_tailwind/`. It is customisable with the `configViewerPath` options:

```
import { defineConfig } from '@studiometa/webpack-config';
import { twig } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [
    tailwindcss({
      configViewerPath: '/__custom_tailwind_viewer_path',
    }),
  ],
});
```

### `yaml`

[](#yaml)

Add support for the import of YAML files with the [js-yaml-loader](https://github.com/wwilsman/js-yaml-loader).

#### Options

[](#options-4)

- `loaderOptions` (`Object`): [options](https://github.com/wwilsman/js-yaml-loader#loader-options) for the `js-yaml-loader`

#### Example

[](#example)

```
import { defineConfig } from '@studiometa/webpack-config';
import { yaml } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [yaml()],
});
```

### `vue`

[](#vue)

Add support for Vue 2 or 3. The presets for Vue are available in two different packages, as their dependencies can not be installed in a single one. You will have to install the package corresponding to the version you want to use in your project:

```
# For Vue 2
npm install --save-dev @studiometa/webpack-config-preset-vue-2
# Or for Vue 3
npm install --save-dev @studiometa/webpack-config-preset-vue-3
```

#### Example

[](#example-1)

```
import { defineConfig } from '@studiometa/webpack-config';
import vue from '@studiometa/webpack-config-preset-vue-3';

export default defineConfig({
  presets: [vue()],
});
```

### `hash`

[](#hash)

Add content hash to filenames in production.

#### Options

[](#options-5)

This preset has no options.

#### Example

[](#example-2)

```
import { defineConfig } from '@studiometa/webpack-config';
import { hash } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [hash()],
});
```

### `https`

[](#https)

Generate an SSL certificate with [`mkcert`](https://github.com/FiloSottile/mkcert) for the local dev server. Can be useful when proxying to an HTTPS only url in dev mode.

#### Options

[](#options-6)

This preset has no options.

#### Example

[](#example-3)

```
import { defineConfig } from '@studiometa/webpack-config';
import { https } from '@studiometa/webpack-config/presets';

export default defineConfig({
  presets: [https()],
});
```

Contributing
------------

[](#contributing)

This project's branches are managed with [Git Flow](https://github.com/petervanderdoes/gitflow-avh), every feature branch must be merged into develop via a pull request.

###  Health Score

48

—

FairBetter than 95% of packages

Maintenance69

Regular maintenance activity

Popularity29

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 96.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~26 days

Recently: every ~44 days

Total

37

Last Release

347d ago

Major Versions

4.2.6 → 5.0.02023-07-25

4.2.7 → 5.2.32023-10-04

5.3.0 → 6.0.02024-04-15

5.3.2 → 6.0.32024-05-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/7e88435dae9fed57464c2668f35d4c7dd7f874e55e9727972369538d639d6373?d=identicon)[titouanmathis](/maintainers/titouanmathis)

---

Top Contributors

[![titouanmathis](https://avatars.githubusercontent.com/u/250145?v=4)](https://github.com/titouanmathis "titouanmathis (831 commits)")[![depfu[bot]](https://avatars.githubusercontent.com/in/715?v=4)](https://github.com/depfu[bot] "depfu[bot] (13 commits)")[![renovate-bot](https://avatars.githubusercontent.com/u/25180681?v=4)](https://github.com/renovate-bot "renovate-bot (7 commits)")[![jeremschelb](https://avatars.githubusercontent.com/u/55983109?v=4)](https://github.com/jeremschelb "jeremschelb (5 commits)")[![antoine4livre](https://avatars.githubusercontent.com/u/32898457?v=4)](https://github.com/antoine4livre "antoine4livre (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)")

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/studiometa-webpack-config/health.svg)

```
[![Health](https://phpackages.com/badges/studiometa-webpack-config/health.svg)](https://phpackages.com/packages/studiometa-webpack-config)
```

###  Alternatives

[illuminate/database

The Illuminate Database package.

2.8k52.4M9.4k](/packages/illuminate-database)[illuminate/support

The Illuminate Support package.

582107.1M34.5k](/packages/illuminate-support)[illuminate/filesystem

The Illuminate Filesystem package.

15161.6M2.6k](/packages/illuminate-filesystem)[illuminate/validation

The Illuminate Validation package.

18936.7M1.4k](/packages/illuminate-validation)[illuminate/queue

The Illuminate Queue package.

20331.4M1.2k](/packages/illuminate-queue)[timacdonald/log-fake

A drop in fake logger for testing with the Laravel framework.

4235.9M56](/packages/timacdonald-log-fake)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)