{"id":19205413,"url":"https://github.com/morgancaron/webpack-config-generator","last_synced_at":"2025-05-12T17:15:38.714Z","repository":{"id":35057028,"uuid":"180555412","full_name":"MorganCaron/webpack-config-generator","owner":"MorganCaron","description":"Because configuring Webpack is too far complicated.","archived":false,"fork":false,"pushed_at":"2023-01-09T12:18:08.000Z","size":11273,"stargazers_count":5,"open_issues_count":40,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-12T17:15:32.242Z","etag":null,"topics":["configuration","sass","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://morgancaron.github.io/webpack-config-generator/","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/MorganCaron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"MorganCaron"}},"created_at":"2019-04-10T10:09:03.000Z","updated_at":"2023-01-31T17:14:53.000Z","dependencies_parsed_at":"2023-01-15T12:54:40.763Z","dependency_job_id":null,"html_url":"https://github.com/MorganCaron/webpack-config-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganCaron%2Fwebpack-config-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganCaron%2Fwebpack-config-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganCaron%2Fwebpack-config-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganCaron%2Fwebpack-config-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorganCaron","download_url":"https://codeload.github.com/MorganCaron/webpack-config-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253785011,"owners_count":21963903,"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":["configuration","sass","typescript","webpack"],"created_at":"2024-11-09T13:12:36.785Z","updated_at":"2025-05-12T17:15:38.695Z","avatar_url":"https://github.com/MorganCaron.png","language":"JavaScript","funding_links":["https://github.com/sponsors/MorganCaron"],"categories":[],"sub_categories":[],"readme":"# Webpack Config Generator\n\n## *Because configuring Webpack is too far complicated.*\n\nManually creating webpack configuration files ...\n\n* is time consuming\n* is error prone\n* requires knowledge of webpack\n* has all the disadvantages of copy/paste in case of multiple configuration files\n\n![Github Stars](https://img.shields.io/github/stars/MorganCaron/webpack-config-generator?style=for-the-badge)\n![Github Forks](https://img.shields.io/github/forks/MorganCaron/webpack-config-generator?style=for-the-badge)\n[![Discord](https://img.shields.io/discord/268838260153909249?label=Chat\u0026logo=Discord\u0026style=for-the-badge)](https://discord.gg/mxZvun4)\n[![Contributing](https://img.shields.io/badge/-Contributing-blue?style=for-the-badge)](CONTRIBUTING.md)\n\n### Project Health\n[![Codacy](https://img.shields.io/codacy/grade/9db6217bf3c34d6c8a053350d7cd5285?logo=Codacy\u0026style=for-the-badge)](https://www.codacy.com/manual/MorganCaron/webpack-config-generator)\n[![Github Actions](https://img.shields.io/github/workflow/status/MorganCaron/webpack-config-generator/Documentation%20deployment?logo=Github\u0026style=for-the-badge)](https://github.com/MorganCaron/webpack-config-generator/actions?query=workflow%3A%22Documentation+deployment%22)\n\n---\n\n## Installation\n\n### Prerequisites\nYou need [Git](https://git-scm.com/downloads) and [NodeJS](https://nodejs.org/en/download/) installed on your computer.\nYou also need [Python](https://www.python.org/downloads/), this is required by the node-gyp dependency used by node-sass.\n\n### Configuration\nYou can use the template [Webpack Base Project](https://github.com/MorganCaron/webpack-base-project) if you want to avoid making configuration errors by following the instructions below.\n\nCreate a new folder for the project and open a terminal there to execute the following commands.\n\n```console\nnpm init\nnpm install webpack-config-generator --save-dev\n```\nThese commands will generate a big node_modules folder, don't forget to exclude it in a .gitignore file.\n\nYou must have an `tsconfig.json` file at the root of your project, add build commands to the `package.json` and create a configuration file named `webpack.config.js`.\n\n#### `tsconfig.json`\n```js\n{\n\t\"extends\": \"webpack-config-generator/tsconfig\",\n\t\"compilerOptions\": {\n\t\t\"baseUrl\": \"src\",\n\t\t\"outDir\": \"build\"\n\t}\n}\n\n```\n\n#### `package.json`\n```diff\n{\n\t\"scripts\": {\n+\t\t\"dev\": \"webpack serve --open --mode development\",\n+\t\t\"build\": \"webpack --mode production\"\n\t},\n}\n```\n\n#### `webpack.config.js`\n```js\n\"use strict\";\n\nconst webpackConfigGenerator = require(\"webpack-config-generator\");\n\nmodule.exports = (env, argv) =\u003e {\n\treturn webpackConfigGenerator({\n\t\tmode: argv.mode,\n\t\tentry: {\n\t\t\tapp: [\"./src/ts/App.ts\", \"./src/sass/style.sass\"]\n\t\t},\n\t\tindex: \"./src/index.html\",\n\t\tfavicon: \"./src/favicon.png\"\n\t});\n};\n```\n\n#### `Project directory`\n```\nProject\n├── build\n│   ├── img\n│   │   ├── icons\n│   │   │   └── ...\n│   │   └── example.jpg\n│   ├── App.d.ts\n│   ├── app.min.css\n│   └── app.min.js\n├── src\n│   ├── css\n│   │   └── style.css\n│   ├── img\n│   │   └── example.jpg\n│   ├── sass\n│   │   └── style.sass\n│   ├── ts\n│   │   └── App.ts\n│   ├── txt\n│   │   └── loremIpsum.txt\n│   ├── favicon.png\n│   └── index.html\n├── .gitignore\n├── index.html\n├── package.json\n├── tsconfig.json\n└── webpack.config.js\n```\n\n#### Options\n\n| Key | Information | Type | Required | Default value |\n| --- | --- | --- | --- | --- |\n| **mode** | This parameter defines the default behavior of webpack-config-generator. `'development'` or `'production'` | `string` | Yes | `'development'` |\n| **watch** | Enables real-time updating. | `boolean` | No | `(mode === 'development')` |\n| **showError** | Enables error display. | `boolean` | No | `true` |\n| **minimize** | Minimizes the size of the generated files. | `boolean` | No | `(mode !== 'development')` |\n| **sourceMap** | Enables the generation of source map files. | `boolean` | No | `true` |\n| **entry** | This parameter takes an object whose key is the name of the final file, and each value is an array of filenames. | `Object` | No | `{}` |\n| **externals** | Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime. | `Object` | No | `{}` |\n| **provide** | Automatically load modules instead of having to import or require them everywhere. | `Object` | No | `{}` |\n| **index** | Path of the project source file index.html. | `string or null` | No | `null` |\n| **inject** | Enables the injection of assets (styles/scripts) in the html file. | `boolean` | No | `true` |\n| **buildFolder** | Directory in which to place the generated files. | `string` | No | `'build/'` |\n| **favicon** | Name of the favicon file. It must be in the src/ folder. | `string or null` | No | `null` |\n| **tsLoader** | You can choose between two loaders to read the typescript. | `'tsc'` or `'babel'` | No | `tsc` |\n| **exportLibrary** | If the project is a library, exportLibrary contains information on how it is exported. | `Object` | No | `{}` |\n\nNow run the `npm run dev` command to verify that the project has been properly configured.\n\n### Build command\n\n#### Development\nIn this mode, if one of your files is updated, the code will be recompiled so you don't have to run the full build manually.\n```console\nnpm run dev\n```\n\n#### Production\nIn this mode, the files will be generated in the `build/` directory and automatically included in the index.html file.\n```console\nnpm run build\n```\n\n---\n\n## Additional Informations\n![Top Language](https://img.shields.io/github/languages/top/MorganCaron/webpack-config-generator?style=for-the-badge)\n[![License](https://img.shields.io/github/license/MorganCaron/webpack-config-generator?style=for-the-badge)](https://github.com/MorganCaron/webpack-config-generator/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorgancaron%2Fwebpack-config-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorgancaron%2Fwebpack-config-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorgancaron%2Fwebpack-config-generator/lists"}