{"id":31926439,"url":"https://github.com/yegorich555/webpack-must-have","last_synced_at":"2025-10-14T01:43:56.373Z","repository":{"id":39750510,"uuid":"196194598","full_name":"Yegorich555/webpack-must-have","owner":"Yegorich555","description":"Must-have configuration for webpack","archived":false,"fork":false,"pushed_at":"2025-08-18T10:27:31.000Z","size":5288,"stargazers_count":19,"open_issues_count":0,"forks_count":17,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T19:52:45.200Z","etag":null,"topics":["eslint","stylelint","typescript","web-ui-pack","webpack","webpack-mock-server"],"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/Yegorich555.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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,"zenodo":null},"funding":{"github":["Yegorich555"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2019-07-10T11:41:48.000Z","updated_at":"2025-08-18T10:27:34.000Z","dependencies_parsed_at":"2023-12-09T22:20:54.122Z","dependency_job_id":"881b906f-c436-47ee-a047-26469c9f6ddc","html_url":"https://github.com/Yegorich555/webpack-must-have","commit_stats":null,"previous_names":[],"tags_count":8,"template":true,"template_full_name":null,"purl":"pkg:github/Yegorich555/webpack-must-have","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yegorich555%2Fwebpack-must-have","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yegorich555%2Fwebpack-must-have/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yegorich555%2Fwebpack-must-have/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yegorich555%2Fwebpack-must-have/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yegorich555","download_url":"https://codeload.github.com/Yegorich555/webpack-must-have/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yegorich555%2Fwebpack-must-have/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017500,"owners_count":26086085,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["eslint","stylelint","typescript","web-ui-pack","webpack","webpack-mock-server"],"created_at":"2025-10-14T01:43:48.667Z","updated_at":"2025-10-14T01:43:56.364Z","avatar_url":"https://github.com/Yegorich555.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Yegorich555"],"categories":[],"sub_categories":[],"readme":"# webpack-must-have\n\nWebpack version: 5+\n\n## What is new in Webpack 5\n\n- Faster builds with persistent caching\n- Smaller bundle sizes (better tree-shaking)\n- Better long term caching\n\n### If you need Webpack4 take a look branch [webpack_v4](https://github.com/Yegorich555/WebpackMustHave/tree/webpack_v4)\n\n### Intro into Webpack you can watch on youtube (russian only): [webpack-intro](https://www.youtube.com/watch?v=Ds0l__XMbIo\u0026ab_channel=yahik)\n\n## How to run project\n\n1. Open project in VSCode (for example)\n2. Run command `npm i` in terminal (console) for installing all required packages (Node.js is required: \u003chttps://nodejs.org/en/\u003e)\n3. For building project you can use the following commands:\n   - `npm run build-prod` - building production version (minimized and optimized). The project will be builded into `build` folder. You can change destination in `webpack.common.js (line 19)`\n   - `npm run build-dev` - building development version\n   - `npm run serve` - building development hot-reloaded version with webpack-dev-server\n\n## How to install packages for CI/CD\n\n- Before build without lint use `npm ci --ignore-scripts --omit=optional --omit=peer`\n- Before lint with auto-fix use `npm i --ignore-scripts`\n\n- ### Explanation for package.json\n\n  - **devDependencies** - packages for `dev \u0026 prod build` (so for prod need dependencies + devDependencies)\n  - **dependencies** - UI (client-side) packages\n  - **optionalDependencies** - packages for `linters` \u0026 `development` (webpack-dev-server, ESLint, StyleLint etc.)\n\n## Recommended VSCode extensions\n\n- CSS Modules: \u003chttps://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules\u003e\n- CSS Modules Syntax Highlighter: \u003chttps://marketplace.visualstudio.com/items?itemName=andrewleedham.vscode-css-modules\u003e\n- ESlint: \u003chttps://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint\u003e\n- StyleLint: \u003chttps://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint\u003e\n- SCSS intellisense: \u003chttps://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss\u003e\n- Path autocomplete: \u003chttps://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete\u003e\n- Prettier - Code formatter: \u003chttps://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\u003e\n- Import Cost: \u003chttps://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost\u003e\n- Markdownlint: \u003chttps://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint\u003e\n- EditConfig for VS Code: \u003chttps://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig\u003e\n- Spell Checker: \u003chttps://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker\u003e\n- TodoTree: \u003chttps://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree\u003e\n\n## Features\n\n- **Lint**. Integrated the most popular linters: ESlint, StyleLint\n- **BrowserList**. All required browsers are pointed in **.browserslistrc**, so project will be compiled according to required browsers (babel, postcss, styleLint uses this file)\n- **BrowserList. StyleLint**. Integrated [no-unsupported-browser-features](https://www.npmjs.com/package/stylelint-no-unsupported-browser-features), so during the css,scss-coding styleLint will show on-css rule that unsupported (according to .browserslistrc)\n- **MockServer**. For mocking api responses integrated [webpack-mock-server](https://www.npmjs.com/package/webpack-mock-server) that supports JS,TS and hot-replacement:\n- **Styles**. Integrated [CSS-Modules](https://github.com/css-modules/css-modules) and [postcss-autoprefixer](https://www.npmjs.com/package/autoprefixer), [postcss-normalize](https://www.npmjs.com/package/postcss-normalize), [CssMinimizerPlugin](https://www.npmjs.com/package/css-minimizer-webpack-plugin) (uses [css-nano](https://cssnano.co/) for production build)\n- All packages optimized for CI/CD. See [CI/CD section](#how-to-install-packages-for-cicd)\n\n## Recommended npm-packages\n\n- [web-ui-pack](https://www.npmjs.com/package/web-ui-pack) - nice package with form-controls, smart-popup, spinner etc. \u0026 useful helpers\n- [ytech-js-extensions](https://www.npmjs.com/package/ytech-js-extensions) - generic extensions for Arrays, Dates (that lacks in web-ui-pack)\n\n## TODO\n\n- Add icomoon to fonts\n\n## Troubleshooting\n\n- Impossible to install anything with `npm i`\n  \u003e check if your NodeJS version matches with pointed in **package.json: engines.node** section (use [NVM](https://github.com/coreybutler/nvm-windows/releases) to easy manage NodeJS versions)\n- Impossible to run scripts from package.json\n  \u003e try to change backslashes (npm-cli issue that flows between versions time to time)\n  \u003e from `.\\\\node_modules\\\\.bin\\\\webpack serve --open --config webpack.devServer.js\"`\n  \u003e to `./node_modules/.bin/webpack serve --open --config webpack.devServer.js\"`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyegorich555%2Fwebpack-must-have","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyegorich555%2Fwebpack-must-have","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyegorich555%2Fwebpack-must-have/lists"}