{"id":14973819,"url":"https://github.com/studiometa/webpack-config","last_synced_at":"2025-10-27T02:31:36.284Z","repository":{"id":35086440,"uuid":"204871742","full_name":"studiometa/webpack-config","owner":"studiometa","description":"⚙️ A Webpack and Browsersync based build tool for the web","archived":false,"fork":false,"pushed_at":"2025-02-03T01:21:36.000Z","size":9214,"stargazers_count":4,"open_issues_count":7,"forks_count":1,"subscribers_count":13,"default_branch":"develop","last_synced_at":"2025-02-05T09:12:29.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/studiometa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-28T07:18:21.000Z","updated_at":"2025-01-23T08:29:27.000Z","dependencies_parsed_at":"2023-01-15T13:32:56.616Z","dependency_job_id":"4b93de75-bd09-4c39-a3e7-68934e5e01f8","html_url":"https://github.com/studiometa/webpack-config","commit_stats":{"total_commits":571,"total_committers":6,"mean_commits":95.16666666666667,"dds":0.04378283712784592,"last_synced_commit":"0e9a5bf49545cfc31acfd64fecb8a572617b9030"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fwebpack-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fwebpack-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fwebpack-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/studiometa%2Fwebpack-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/studiometa","download_url":"https://codeload.github.com/studiometa/webpack-config/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238422991,"owners_count":19469682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:49:27.678Z","updated_at":"2025-10-27T02:31:30.880Z","avatar_url":"https://github.com/studiometa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @studiometa/webpack-config\n\n[![NPM Version](https://img.shields.io/npm/v/@studiometa/webpack-config.svg?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://www.npmjs.com/package/@studiometa/webpack-config/)\n[![Downloads](https://img.shields.io/npm/dm/@studiometa/webpack-config?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://www.npmjs.com/package/@studiometa/webpack-config/)\n[![Size](https://img.shields.io/npm/unpacked-size/%40studiometa%2Fwebpack-config?style=flat\u0026colorB=3e63dd\u0026colorA=414853\u0026label=size)](npmjs.com/package/@studiometa/webpack-config)\n[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/webpack-config?style=flat\u0026colorB=3e63dd\u0026colorA=414853)](https://david-dm.org/studiometa/webpack-config)\n\n\u003e Minimal configuration to run a development server and build your assets with Webpack.\n\n## Installation\n\nInstall the package in your project:\n\n```bash\nnpm install --save-dev @studiometa/webpack-config\n```\n\n## Usage\n\nCreate a `meta.config.js` file at the root of yout project:\n\n````ts\n// meta.config.mjs\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { twig, yaml, tailwindcss, prototyping, eslint, stylelint, hash, https } from '@studiometa/webpack-config/presets';\nimport { vue } from '@studiometa/webpack-config-preset-vue-3';\n\nexport default defineConfig({\n  src: [\n    './path/to/src/js/*.js',\n    './path/to/src/css/*.scss',\n  ],\n  dist: './path/to/dist',\n  public: '/path/to/dist',\n\n  /**\n   * Define which target to use when creating the bundle.\n   * An array of targets will create a bundle for each target.\n   * Defaults to `legacy`.\n   *\n   * @type {'modern'|'legacy'|Array\u003c'modern'|'legacy'\u003e}\n   * @optional\n   */\n  target: ['modern', 'legacy'],\n\n  /**\n   * Analyze the bundle with the WebpackBundleAnalyzer plugin.\n   * @type {Boolean}\n   * @optional\n   */\n  analyze: false,\n\n  /**\n   * Merge all initial CSS chunks into one file.\n   * Use a RegExp or a function to exclude some files:\n   * ```js\n   * mergeCSS: /^(?!.*css\\/do-not-merge\\.scss).*$/,\n   * mergeCSS(module, chunk) {\n   *   return module.constructor.name === 'CssModule';\n   * },\n   * ```\n   * @type {Boolean|RegExp|Function}\n   * @optional\n   */\n  mergeCSS: false,\n\n  /**\n   * Extends the Webpack configuration before merging\n   * with the environment specific configurations.\n   * @type {Function}\n   * @optional\n   */\n  webpack(config, isDev) {},\n\n  /**\n   * Extends the development Webpack configuration.\n   * @param {WebpackConfig} devConfig The Webpack development config.\n   * @type {Function}\n   * @optional\n   */\n  webpackDev(devConfig) {},\n\n  /**\n   * Extends the production Webpack configuration.\n   * @param {WebpackConfig} devConfig The Webpack production config.\n   * @type {Function}\n   * @optional\n   */\n  webpackProd(prodConfig) {},\n\n  /**\n   * Configure the `sass-loader` options.\n   * @type {Objet}\n   * @optional\n   * @see https://github.com/webpack-contrib/sass-loader#sassoptions\n   */\n  sassOptions: {},\n\n  /**\n   * Configure the browserSync server if you do not use a proxy by setting\n   * this property to `true` or a BrowserSync server configuration object.\n   * If the property is a function, it will be used to alter the server\n   * configuraton and instance in proxy mode.\n   * @see https://browsersync.io/docs/options#option-server\n   * @type {Boolean|Object|Function}\n   * @optional\n   */\n  server: true,\n  server(bsConfig, bs) {},\n\n  /**\n   * Watch for file changes in dev mode and:\n   * - reload the browser\n   * - or execute a callback\n   * @see https://browsersync.io/docs/api#api-watch\n   * @type {Array\u003cString|Array\u003e}\n   * @optional\n   */\n  watch: [\n    // Watch for changes on all PHP files and reload the browser\n    '*.php',\n    // Watch for all events on all HTML files and execute the callback\n    [\n      '*.html',\n      (event, file, bs, bsConfig) =\u003e {\n        if (event === 'change') {\n          bs.reload();\n        }\n      },\n    ],\n  ],\n\n  /**\n   * Use presets to apply pre-made configurations.\n   * @type {Array\u003cString|Array\u003cString,Object\u003e\u003e}\n   * @optional\n   */\n  presets: [\n    eslint(), // use the `eslint` preset\n    stylelint(), // use the `stylelint` preset\n    twig(), // use the `twig` preset\n    tailwindcss(), // use the `tailwindcss` preset,\n    yaml(), // use the `yaml` preset,\n    vue(), // use the Vue 3 preset,\n    hash(), // use the content hash preset\n    https(), // use the https preset\n    {\n      name: 'my-custom-preset',\n      handler(metaConfig, { extendWebpack, extendBrowsersync, isDev }) {\n        // ...\n      },\n    },\n  ],\n};\n````\n\nConfigure a `.env` file with one of the following variable defining your application domain to use for the proxy:\n\n```bash\nAPP_HOST=local.fqdn.com\nAPP_HOSTNAME=local.fqdn.com\nAPP_URL=https://local.fqdn.com\n```\n\nYou can then start the development server:\n\n```bash\nnode_modules/.bin/meta dev\n```\n\nOr watch for changes to build you assets:\n\n```bash\nnode_modules/.bin/meta watch\n```\n\nAnd build your assets for production:\n\n```bash\nnode_modules/.bin/meta build\n```\n\nYou can analyze your bundle(s) with the `--analyze` (or `-a`) argument:s\n\n```bash\nnode_modules/.bin/meta build --analyze\n```\n\n## Features\n\n- Raw imports with the `?raw` query\n- SVG to Vue component with the `?as-vue-component` (requires a [vue preset](#vue))\n\n## Presets\n\nPresets 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:\n\n- [`eslint`](#eslint)\n- [`stylelint`](#stylelint)\n- [`twig`](#twig)\n- [`tailwindcss`](#tailwindcss)\n- [`yaml`](#yaml)\n- [`vue`](#vue)\n- [`hash`](#hash)\n- [`https`](#https)\n\nRead their documentation below to find out how to use and configure them.\n\nCustom presets can be used by using the path of a JS file (relative to the `meta.config.js` file):\n\n```js\n// meta.config.mjs\nimport { defineConfig } from '@studiometa/webpack-config';\nimport myPreset from './my-preset.mjs';\n\nexport default defineConfig({\n  presets: [\n    myPreset({ option: true })\n  ],\n})\n\n// my-preset.mjs\nexport default function myPreset(options) {\n  return {\n    name: 'my-preset',\n    async handler(metaConfig, { extendWebpack, isDev }) {\n      metaConfig.public = 'auto';\n      await extendWebpack(metaConfig, async (webpackConfig) =\u003e {\n        webpackConfig.optimization.minimize = false;\n      });\n    }\n  }\n}\n```\n\n### `eslint`\n\nAdd ESLint validation with [`eslint-webpack-plugin`](https://github.com/webpack-contrib/eslint-webpack-plugin).\n\n#### Options\n\nThe options object is directly passed to the `ESLintPlugin` constructor, see [the package documentation](https://github.com/webpack-contrib/eslint-webpack-plugin#options) for details.\n\n#### Examples\n\nUse it without configuration:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { eslint } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [eslint()],\n});\n```\n\nOr pass custom options:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { eslint } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [\n    eslint({\n      fix: false,\n    }),\n  ],\n});\n```\n\n### `stylelint`\n\nAdd StyleLint validation with [`stylelint-webpack-plugin`](https://github.com/webpack-contrib/stylelint-webpack-plugin).\n\n#### Options\n\nThe options object is directly passed to the `StylelintPlugin` constructor, see [the package documentation](https://github.com/webpack-contrib/stylelint-webpack-plugin#options) for details.\n\n#### Examples\n\nUse it without configuration:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { stylelint } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [stylelint()],\n});\n```\n\nOr pass custom options:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { stylelint } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [\n    stylelint({\n      fix: false,\n    }),\n  ],\n});\n```\n\n### `twig`\n\nAdd the `twig-html-loader` to the Webpack configuration.\n\n#### Options\n\nThe options object is directly passed to the [`twig-html-loader`](https://github.com/radiocity/twig-html-loader#options).\n\n#### Examples\n\nUse it without configuration:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { twig } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [twig()],\n});\n```\n\nOr configure the loader options:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { twig } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [\n    twig({\n      debug: true,\n    }),\n  ],\n});\n```\n\n### `tailwindcss`\n\nAdd [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).\n\n#### Options\n\n- `path` (`String`): the absolute path to the Tailwind CSS entry file\n\n#### Examples\n\nUse it without configuration:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { tailwindcss } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [tailwindcss()],\n});\n```\n\nIf the `meta` CLI fails to resolve the `tailwindcss` package, specify its path:\n\n```js\nimport path from 'node:path';\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { twig } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [\n    tailwindcss({\n      path: path.resolve('./node_modules/tailwindcss/lib/index.js'),\n    }),\n  ],\n});\n```\n\nThe default route for the Tailwind config viewer is `/_tailwind/`. It is customisable with the `configViewerPath` options:\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { twig } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [\n    tailwindcss({\n      configViewerPath: '/__custom_tailwind_viewer_path',\n    }),\n  ],\n});\n```\n\n### `yaml`\n\nAdd support for the import of YAML files with the [js-yaml-loader](https://github.com/wwilsman/js-yaml-loader).\n\n#### Options\n\n- `loaderOptions` (`Object`): [options](https://github.com/wwilsman/js-yaml-loader#loader-options) for the `js-yaml-loader`\n\n#### Example\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { yaml } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [yaml()],\n});\n```\n\n### `vue`\n\nAdd 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:\n\n```sh\n# For Vue 2\nnpm install --save-dev @studiometa/webpack-config-preset-vue-2\n# Or for Vue 3\nnpm install --save-dev @studiometa/webpack-config-preset-vue-3\n```\n\n#### Example\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport vue from '@studiometa/webpack-config-preset-vue-3';\n\nexport default defineConfig({\n  presets: [vue()],\n});\n```\n\n### `hash`\n\nAdd content hash to filenames in production.\n\n#### Options\n\nThis preset has no options.\n\n#### Example\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { hash } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [hash()],\n});\n```\n\n### `https`\n\nGenerate 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.\n\n#### Options\n\nThis preset has no options.\n\n#### Example\n\n```js\nimport { defineConfig } from '@studiometa/webpack-config';\nimport { https } from '@studiometa/webpack-config/presets';\n\nexport default defineConfig({\n  presets: [https()],\n});\n```\n\n## Contributing\n\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiometa%2Fwebpack-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstudiometa%2Fwebpack-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiometa%2Fwebpack-config/lists"}