{"id":15511632,"url":"https://github.com/vedees/webpack-template","last_synced_at":"2025-06-12T20:08:01.072Z","repository":{"id":39563083,"uuid":"155749168","full_name":"vedees/webpack-template","owner":"vedees","description":"Webpack 5 template. The best optimization for your production. Features: ts, js, babel, sass, css, postcss and more.","archived":false,"fork":false,"pushed_at":"2024-10-26T16:39:58.000Z","size":1603,"stargazers_count":329,"open_issues_count":5,"forks_count":163,"subscribers_count":19,"default_branch":"webpack5","last_synced_at":"2025-01-29T13:36:44.692Z","etag":null,"topics":["sass","typescript","webpack5"],"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/vedees.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-11-01T17:11:03.000Z","updated_at":"2025-01-17T06:37:22.000Z","dependencies_parsed_at":"2023-12-03T05:23:03.457Z","dependency_job_id":"556b75e5-77a7-47cb-aff4-cc50715c3549","html_url":"https://github.com/vedees/webpack-template","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/vedees/webpack-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedees%2Fwebpack-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedees%2Fwebpack-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedees%2Fwebpack-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedees%2Fwebpack-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vedees","download_url":"https://codeload.github.com/vedees/webpack-template/tar.gz/refs/heads/webpack5","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedees%2Fwebpack-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259522114,"owners_count":22870449,"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":["sass","typescript","webpack5"],"created_at":"2024-10-02T09:53:09.136Z","updated_at":"2025-06-12T20:08:01.045Z","avatar_url":"https://github.com/vedees.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/vedegis"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003ch1\u003eWebpack work template\u003c/h1\u003e\n  \u003cp\u003e\n    Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.\n  \u003c/p\u003e\n  \u003cp\u003eAuthor: \u003ca href=\"https://github.com/vedees/\" target=\"_blank\"\u003eVedees\u003c/a\u003e | \u003ca href=\"https://www.youtube.com/playlist?list=PLkCrmfIT6LBQWN02hNj6r1daz7965GxsV\" target=\"_blank\"\u003eYoutube guide (ru)\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n## Features:\n\n- separated configs for `dev` and `prod`\n- `typescript / javascript` full support\n- `sass / css` full support\n- full babel \u0026 postcss setup\n- 0 dependencies\n- the best optimization for your production\n- easy webpack and babel customization\n\nEverybody knows that developing runs on coffee! Thanks for your support!\n\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\n\n## Build Setup:\n\n```bash\n# Download repository:\ngit clone https://github.com/vedees/webpack-template webpack-template\n\n# Go to the app:\ncd webpack-template\n\n# Install dependencies:\n# npm install\n# or:\nyarn\n\n# Server with hot reload at http://localhost:8084/\n# npm run start\n# or:\nyarn start\n\n# Output will be at dist/ folder\n# npm run build\n# or:\nyarn build\n```\n\n## Project Structure:\n\n- `public/*.html` - HTML files\n- `src/app` - core app\n- `src/shared` - shared files\n- `src/shared/img` - images folder (! for html calls use correct path: `static/img/some.jpg`)\n- `src/shared/misc` - misc files (i.g. favicon, sitemap, etc.)\n- `src/index.ts` - main app entity\n\nConfigs:\n\n- `/babel-defines.js` - config for babel\n- `/webpack/webpack-pages.js` - config for html pages\n- `/webpack/webpack-defines.js` - config for entire webpack\n\nMain entry point:\n\n- `src/app/index.ts` - core entry point\n\n## Defines:\n\nCore webpack config from `/webpack/webpack-defines.js`:\n\n```js\nconst PATHS = {\n  // path to the src dir\n  src: path.join(__dirname, '../src'),\n  // path to the output dir\n  dist: path.join(__dirname, '../dist'),\n  // path to the public files (html files)\n  public: path.join(__dirname, '../public'),\n\n  // path to output sub dir (js, css, fonts, etc.)\n  assets: 'assets/',\n  // path to output sub dir (img, icons, etc.)\n  static: 'static/'\n}\n```\n\n## Pages config:\n\nPages config from `/webpack/webpack-pages.js`:\n\n```js\nconst pages = [\n  {\n    // page title\n    title: 'Home page',\n    // template name `public/index.html`\n    template: 'index.html',\n    // output filename `dist/index.html`\n    filename: 'index.html',\n\n    // other options can be here\n  },\n  {\n    title: 'About page',\n    template: 'about.html',\n    filename: 'about.html',\n  }\n]\n```\n\nYou can pass a hash of configuration options to html-webpack-plugin.\n\nAllowed values are as follows:  https://github.com/jantimon/html-webpack-plugin#options\n\n## Manual pages setup:\n\nIn case if you don't want to use Pages config:\n\n1. Create another html file in `./public`\n2. Go to `./webpack/webpack.common.js`\n3. Add new page to the config:\n\n```js\n    // index page:\n    new HtmlWebpackPlugin({\n      title: 'Home page',\n      favicon: defines.src + '/shared/misc/favicon.ico',\n      template: defines.public + '/index.html', // public/index.html page\n      filename: 'index.html' // output file\n    }),\n    // about page:\n    new HtmlWebpackPlugin({\n      title: 'About page',\n      favicon: defines.src + '/shared/misc/favicon.ico',\n      template: defines.public + '/about.html', // public/about.html page\n      filename: 'about.html' // output file\n    }),\n```\n\n## Import libs example:\n\nInstall it:\n\n```bash\nyarn add bootstrap react react-dom\n```\n\nImport libs to `src/app/index.ts`:\n\n```js\n// React example\nimport React from 'react'\n\n// Bootstrap example (with custom js imports)\nimport Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'\nimport 'bootstrap/dist/js/bootstrap.min.js'\n```\n\n## Import SASS / CSS libs example:\n\nImport libs to `src/app/index.scss`:\n\n```scss\n// sass lib import example:\n@import '../../node_modules/spinners/stylesheets/spinners';\n// css lib import example:\n@import '../../node_modules/flickity/dist/flickity.css';\n```\n\n## React example:\n\nHere's an example with React + i18n Provider.\n\nInstall react:\n\n```bash\nyarn add react react-dom\n```\n\nCreate div with id `app` in `public/index.html`:\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n```\n\nInit the app in `src/app/index.ts`:\n\n```tsx\nimport React from 'react'\nimport { createRoot } from 'react-dom/client'\n\n// app styles\nimport './index.scss'\n\n// local providers:\nimport { I18nProvider } from './providers/I18nProvider'\n\nconst container = document.getElementById('app') as HTMLElement\nconst root = createRoot(container)\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cI18nProvider\u003e...\u003c/I18nProvider\u003e\n  \u003c/React.StrictMode\u003e\n)\n```\n\nFile `src/app/providers/I18nProvider.tsx`:\n\n```tsx\nimport React, { FC, PropsWithChildren } from 'react'\n\nexport const I18nProvider: FC\u003cPropsWithChildren\u003e = ({ children }) =\u003e {\n  // ...\n\n  return \u003cI18n locale={detectedLocale}\u003e{children}\u003c/I18n\u003e\n}\n```\n\n## Vue example:\n\nInstall vue:\n\n```bash\nyarn add vue\n```\n\nInit the app in `src/app/index.ts`:\n\n```js\n// vue example (react one is above):\nconst app = new Vue({\n  el: '#app'\n})\n```\n\nCreate div with id `app` in `public/index.html`:\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n```\n\n### Adding Vue Components:\n\nCreate your component in `src/app/components/`.\n\n**HTML Usage (in `*.html` files):**\n\nInit component in `src/app/index.ts`:\n\n```js\nVue.component('example-component', require('./components/Example.vue').default)\n```\n\nIn any html files:\n\n```html\n\u003cexample-component /\u003e\n```\n\n**VUE Usage (in `*.vue` files):**\n\nImport component:\n\n```js\nimport ExampleComponent from '@/components/Example.vue'\n```\n\nInit component (template):\n\n```js\n\u003cExample /\u003e\n```\n\nRegister component (script):\n\n```js\ncomponents: {\n  Example: ExampleComponent\n}\n```\n\n## Adding Google Fonts:\n\nConnect fonts to `public/index.html`:\n\n```html\n\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\" /\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin /\u003e\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500\u0026display=swap\" rel=\"stylesheet\" /\u003e\n```\n\nChange the font in `src/app/styles/body.scss`:\n\n```scss\nhtml {\n  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol' !important;\n}\n```\n\n## Adding local fonts:\n\nIn case if you don't want to use Google Fonts:\n\n- Download fonts\n- Add fonts to the (i.g. `/src/shared/fonts/OpenSans/...`).\n\nThen add `@font-face` in some `.scss` file (i.g. `/src/app/styles/font.scss`):\n\n```scss\n// Open Sans example:\n@font-face {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url('/static/fonts/OpenSans/Open-Sans.woff2') format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}\n```\n\nThe last step is to copy these fonts into the `/dist` folder every time you build the project.\n\nAdd another config for `CopyWebpackPlugin` to `/webpack/webpack.common.js`:\n\n```js\nnew CopyWebpackPlugin({\n  // ...\n\n  // `shared/fonts` to `dist/static/fonts`\n  {\n    from: `${defines.src}/shared/fonts`,\n    to: `${defines.dist}/${defines.static}/fonts`\n  },\n})\n```\n\nChange the font in `src/app/styles/body.scss`:\n\n```scss\nhtml {\n  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol' !important;\n}\n```\n\n## License:\n\n[MIT](./LICENSE)\n\nCopyright (c) 2018-present, [Evgenii Vedegis](https://github.com/vedees)\n\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\n[buymeacoffee]: https://www.buymeacoffee.com/vedegis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedees%2Fwebpack-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvedees%2Fwebpack-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedees%2Fwebpack-template/lists"}