Download the PHP package studiometa/webpack-config without Composer

@studiometa/webpack-config

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

Installation

Install the package in your project:

Usage

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

js

• mergeCSS: /^(?!.css\/do-not-merge.scss).$/,
• mergeCSS(module, chunk) {
• return module.constructor.name === 'CssModule';
• },
• `

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

You can then start the development server:

Or watch for changes to build you assets:

And build your assets for production:

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

Features

• Raw imports with the ?raw query
• SVG to Vue component with the ?as-vue-component (requires a vue preset)

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
• stylelint
• twig
• tailwindcss
• yaml
• vue
• hash
• 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):

eslint

Add ESLint validation with eslint-webpack-plugin.

Options

The options object is directly passed to the ESLintPlugin constructor, see the package documentation for details.

Examples

Use it without configuration:

Or pass custom options:

stylelint

Add StyleLint validation with stylelint-webpack-plugin.

Options

The options object is directly passed to the StylelintPlugin constructor, see the package documentation for details.

Examples

Use it without configuration:

Or pass custom options:

twig

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

Options

The options object is directly passed to the twig-html-loader.

Examples

Use it without configuration:

Or configure the loader options:

tailwindcss

Add Tailwind CSS to the PostCSS configuration and enable a preview of your Tailwind configuration in dev mode with tailwind-config-viewer.

Options

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

Examples

Use it without configuration:

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

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

yaml

Add support for the import of YAML files with the js-yaml-loader.

Options

• loaderOptions (Object): options for the js-yaml-loader

Example

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:

Example

polyfills

Add runtime polyfills based on actual usage while keeping esbuild-loader in the pipeline. This preset is available as a separate package:

Example

hash

Add content hash to filenames in production.

Options

This preset has no options.

Example

https

Generate an SSL certificate with mkcert for the local dev server. Can be useful when proxying to an HTTPS only url in dev mode.

Options

This preset has no options.

Example

Contributing

This project uses a trunk-based workflow with main as the default branch. Open a pull request targeting main for feature, fix, and maintenance branches.