{"id":13671304,"url":"https://github.com/merkle-open/webpack-config-plugins","last_synced_at":"2025-05-14T12:12:29.170Z","repository":{"id":38426011,"uuid":"143980906","full_name":"merkle-open/webpack-config-plugins","owner":"merkle-open","description":"Provide best practices for webpack 4 loader configurations","archived":false,"fork":false,"pushed_at":"2025-02-13T21:46:01.000Z","size":12721,"stargazers_count":644,"open_issues_count":15,"forks_count":39,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-04T16:37:15.479Z","etag":null,"topics":["config","plugins","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://webpack-config-plugins.js.org/","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/merkle-open.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":"2018-08-08T08:02:37.000Z","updated_at":"2025-02-11T01:16:10.000Z","dependencies_parsed_at":"2024-01-14T17:03:26.099Z","dependency_job_id":"fa165a01-e396-4fb1-b6f4-e079a64db45c","html_url":"https://github.com/merkle-open/webpack-config-plugins","commit_stats":{"total_commits":245,"total_committers":18,"mean_commits":13.61111111111111,"dds":0.5102040816326531,"last_synced_commit":"02e3683eb06159158a3ec3e6c783457a78ad6bdf"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fwebpack-config-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fwebpack-config-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fwebpack-config-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merkle-open%2Fwebpack-config-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merkle-open","download_url":"https://codeload.github.com/merkle-open/webpack-config-plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140768,"owners_count":22021220,"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":["config","plugins","webpack","webpack-plugin"],"created_at":"2024-08-02T09:01:05.586Z","updated_at":"2025-05-14T12:12:23.764Z","avatar_url":"https://github.com/merkle-open.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://github.com/merkle-open/webpack-config-plugins/raw/master/logo.png\" /\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://github.com/merkle-open/webpack-config-plugins/raw/master/plug.png\" /\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n\n[![NPM version](https://badge.fury.io/js/common-config-webpack-plugin.svg)](https://www.npmjs.com/package/common-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](http://opensource.org/licenses/MIT)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Prettier](https://img.shields.io/badge/Code%20Style-Prettier-green.svg)](https://github.com/prettier/prettier)\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Pluggable webpack configurations\n\nCreating webpack _loader_ configurations can be quite time consuming.  \nThis project tries to provide best practices for the most common **loader** requirements: `ts`, `js`, `scss`, `fonts` and `images`.\n\nInstead of copying loader configs from github and stackoverflow you could just add one of the following plugins.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003c/div\u003e\n\n## Required Webpack Version\n\nThe compatible version of webpack to each plugin may vary and is documented in each `package.json` file under the `peerDependencies` property.\n\n## Quick overview\n\n```\nnpx generate-webpack-config\n```\n\nAlternatively you can also use the [online config tool](https://webpack-config-plugins.js.org/) to get started.\n\n## Zero Config example\n\nWebpack itself provides many defaults so you are able to run the `common-config-webpack-plugin` without a webpack.config file:\n\n```bash\nnpm i --save-dev webpack webpack-cli common-config-webpack-plugin\n\nnpx webpack --plugin common-config-webpack-plugin\n```\n\n\u003cdiv align=\"center\"\u003e\n\n![Demo](https://github.com/merkle-open/webpack-config-plugins/raw/master/preview.gif)\n\n\u003c/div\u003e\n\n## Zero Config [webpack-dev-server](https://github.com/webpack/webpack-dev-server) example\n\nYou can even setup an entire development server without configuration:\n\n```bash\nnpm i --save-dev webpack common-config-webpack-plugin html-webpack-plugin\n\nwebpack-dev-server --plugin common-config-webpack-plugin --plugin html-webpack-plugin\n```\n\n\u003cdiv align=\"center\"\u003e\n\n![Demo](https://github.com/merkle-open/webpack-config-plugins/raw/master/preview-dev-server.gif)\n\n\u003c/div\u003e\n\n## Webpack Config\n\nMany projects will need some project specific options. The `common-config-webpack-plugin` suite is designed to be plugable so you will be able to pick only what you need and combine it with your configuration. By default the plugin configuration will adjust depending on your [webpack mode](https://webpack.js.org/concepts/mode/) setting.\n\n```\ncommon-config-webpack-plugin\n  ├── js-config-webpack-plugin\n  ├── ts-config-webpack-plugin\n  ├── scss-config-webpack-plugin\n  └── asset-config-webpack-plugin\n      ├── font-config-webpack-plugin\n      └── image-config-webpack-plugin\n```\n\n### Use them all\n\nTo get started you can just add all `common-config-webpack-plugin` parts at once.\n\n```js\nconst CommonConfigWebpackPlugin = require('common-config-webpack-plugin');\n\nmodule.exports = {\n  plugins: [new CommonConfigWebpackPlugin()],\n};\n```\n\nWhich would be exactly the same as\n\n```js\nconst JsConfigWebpackPlugin = require('js-config-webpack-plugin');\nconst TsConfigWebpackPlugin = require('ts-config-webpack-plugin');\nconst ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');\nconst FontConfigWebpackPlugin = require('font-config-webpack-plugin');\nconst ImageConfigWebpackPlugin = require('image-config-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new JsConfigWebpackPlugin(),\n    new TsConfigWebpackPlugin(),\n    new ScssConfigWebpackPlugin(),\n    new FontConfigWebpackPlugin(),\n    new ImageConfigWebpackPlugin(),\n  ],\n};\n```\n\n### Use only javascript (.js \u0026 .jsx \u0026 .mjs)\n\n[![NPM version](https://badge.fury.io/js/js-config-webpack-plugin.svg)](https://www.npmjs.com/package/js-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`js-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/js-config-webpack-plugin)  \n⚙️[development `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/js-config-webpack-plugin/config/development.config.js)  \n⚙️[production `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/js-config-webpack-plugin/config/production.config.js)\n\nThe `js-config-webpack-plugin` is a modified version of the [create-react-app best practices](https://github.com/facebook/create-react-app/tree/52449c34eedc53e50a2a159d38604ea7df5bd997/packages/react-scripts/config).  \nBy default the plugin configuration will adjust depending on your [webpack mode](https://webpack.js.org/concepts/mode/) setting.\n\n```js\nconst JsConfigWebpackPlugin = require('js-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new JsConfigWebpackPlugin()],\n};\n```\n\n### Use only typescript (.ts \u0026 .tsx)\n\n[![NPM version](https://badge.fury.io/js/ts-config-webpack-plugin.svg)](https://www.npmjs.com/package/ts-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`ts-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/ts-config-webpack-plugin)  \n⚙️[development `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/ts-config-webpack-plugin/config/development.config.js)  \n⚙️[production `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/ts-config-webpack-plugin/config/production.config.js)\n\nThe `ts-config-webpack-plugin` is a modified version of the [ts-loader best practices](https://github.com/TypeStrong/ts-loader/blob/master/examples/thread-loader/webpack.config.js).  \nBy default the plugin configuration will adjust depending on your [webpack mode](https://webpack.js.org/concepts/mode/) setting.\n\n```js\nconst TsConfigWebpackPlugin = require('ts-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new TsConfigWebpackPlugin()],\n};\n```\n\n### Use only styles (.css \u0026 .scss)\n\n[![NPM version](https://badge.fury.io/js/scss-config-webpack-plugin.svg)](https://www.npmjs.com/package/scss-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`scss-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin)  \n⚙️[development `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/scss-config-webpack-plugin/config/development.config.js)  \n⚙️[production `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/scss-config-webpack-plugin/config/production.config.js)\n\nThe `scss-config-webpack-plugin` is a modified version of the [create-react-app best practices](https://github.com/facebook/create-react-app/tree/52449c34eedc53e50a2a159d38604ea7df5bd997/packages/react-scripts/config).  \nBy default the plugin configuration will adjust depending on your [webpack mode](https://webpack.js.org/concepts/mode/) setting.\n\n```js\nconst ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new ScssConfigWebpackPlugin()],\n};\n```\n\n### Use only assets (Font \u0026 Images)\n\n[![NPM version](https://badge.fury.io/js/asset-config-webpack-plugin.svg)](https://www.npmjs.com/package/asset-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`asset-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/asset-config-webpack-plugin)\n\nThe `asset-config-webpack-plugin` is just a wrapper around the `font-config-webpack-plugin` and the `image-config-webpack-plugin`.\n\n```js\nconst AssetConfigWebpackPlugin = require('asset-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new AssetConfigWebpackPlugin()],\n};\n```\n\n### Use only fonts (.woff \u0026 .woff2)\n\n[![NPM version](https://badge.fury.io/js/font-config-webpack-plugin.svg)](https://www.npmjs.com/package/font-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`font-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/font-config-webpack-plugin)  \n⚙️[development `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/font-config-webpack-plugin/config/development.config.js)  \n⚙️[production `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/font-config-webpack-plugin/config/production.config.js)\n\nThe `font-config-webpack-plugin` will allow you to use [woff-fonts](https://caniuse.com/#feat=woff).\n\n```js\nconst FontConfigWebpackPlugin = require('font-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new FontConfigWebpackPlugin()],\n};\n```\n\n### Use only images (.gif \u0026 .jpg \u0026 .jpeg \u0026 .png \u0026 .svg)\n\n[![NPM version](https://badge.fury.io/js/image-config-webpack-plugin.svg)](https://www.npmjs.com/package/image-config-webpack-plugin)\n[![Build Status](https://github.com/merkle-open/webpack-config-plugins/workflows/ci/badge.svg?branch=master)](https://github.com/merkle-open/webpack-config-plugins/actions)\n\n🗒️[`image-config-webpack-plugin` Readme](https://github.com/merkle-open/webpack-config-plugins/tree/master/packages/image-config-webpack-plugin)  \n⚙️[development `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/image-config-webpack-plugin/config/development.config.js)  \n⚙️[production `webpack.config.js`](https://github.com/merkle-open/webpack-config-plugins/raw/master/packages/image-config-webpack-plugin/config/production.config.js)\n\nThe `image-config-webpack-plugin` will allow you to use images from within js and css files.\n\n```js\nconst ImageConfigWebpackPlugin = require('image-config-webpack-plugin');\nmodule.exports = {\n  plugins: [new ImageConfigWebpackPlugin()],\n};\n```\n\n## Quality checks\n\nThe `common-config-webpack-plugin` suite provides typechecks and integration tests for the loader configurations for Windows and Unix.\n\n## Peer dependencies\n\nThe `common-config-webpack-plugin` has a direct dependencies to babel and ts.  \nHowever if you need to pick a specific version you can use the `js-config-webpack-plugin` or `ts-config-webpack-plugin` which use peer-dependencies instead.\n\n## License\n\nThe `common-config-webpack-plugin` is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Fwebpack-config-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerkle-open%2Fwebpack-config-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerkle-open%2Fwebpack-config-plugins/lists"}