{"id":14981869,"url":"https://github.com/leandroberlin/webpack4-boilerplate","last_synced_at":"2025-10-29T09:30:25.104Z","repository":{"id":126385167,"uuid":"174583882","full_name":"LeandroBerlin/webpack4-boilerplate","owner":"LeandroBerlin","description":" :fire: Webpack 4 setup with Babel, SCSS-CSS support, html creation and linking, file import for images, webpack aliasis, Bootstrap, FontAwesome, BrowserSync and Github Pages publishing","archived":false,"fork":false,"pushed_at":"2021-04-15T18:01:10.000Z","size":2664,"stargazers_count":22,"open_issues_count":1,"forks_count":24,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-02T00:24:53.324Z","etag":null,"topics":["babeljs","bootstrap4","es6","fontawesome5","gh-pages","scss","webpack4"],"latest_commit_sha":null,"homepage":"https://leandrodci.github.io/webpack4-boilerplate/","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/LeandroBerlin.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":"2019-03-08T17:54:03.000Z","updated_at":"2024-04-04T10:19:18.000Z","dependencies_parsed_at":"2023-06-16T12:45:25.008Z","dependency_job_id":null,"html_url":"https://github.com/LeandroBerlin/webpack4-boilerplate","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":"0.29268292682926833","last_synced_commit":"970e8189b041df9310f6599530f4572b43a9381b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeandroBerlin%2Fwebpack4-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeandroBerlin%2Fwebpack4-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeandroBerlin%2Fwebpack4-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeandroBerlin%2Fwebpack4-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeandroBerlin","download_url":"https://codeload.github.com/LeandroBerlin/webpack4-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238795481,"owners_count":19531754,"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":["babeljs","bootstrap4","es6","fontawesome5","gh-pages","scss","webpack4"],"created_at":"2024-09-24T14:04:24.884Z","updated_at":"2025-10-29T09:30:19.767Z","avatar_url":"https://github.com/LeandroBerlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Boilerplate\n\n![Berlin](https://img.shields.io/badge/Built%20in-Berlin-critical.svg?logo=webpack) ![Repo_size](https://img.shields.io/github/repo-size/LeandroDCI/webpack4-boilerplate.svg)\n[![MIT License](https://img.shields.io/github/license/leandroDCI/webpack4-boilerplate.svg)](LICENSE)\n\n\nA [Webpack 4](https://webpack.js.org/) boilerplate with build-in:\n\n- creation of HTML files to serve your webpack bundles using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n- ECMAScript 6 to ECMAScript 5 transpiling with [babel](https://babeljs.io/) \n- CSS extraction into a single file using [style-loader](https://github.com/webpack-contrib/style-loader), [css-loader](https://github.com/webpack-contrib/css-loader) and [css-mini-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) \n- SCSS support using [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass).\n- Images import with [file-loader](https://github.com/webpack-contrib/file-loader)\n- Optimization/Minification with [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) and [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). \n- [Bootstrap](https://getbootstrap.com/) SCSS and [Fontawesome](https://fontawesome.com) local fonts support\n- Github Pages publishing using [gh-pages](https://www.npmjs.com/package/gh-pages)\n- Use aliases for easy imports\n- [BrowserSync](https://www.browsersync.io/) integration\n\n\n  \n  \n  \n  \n[DEMO](https://leandrodci.github.io/webpack4-boilerplate/)\n\n  \n  \n  \n## Get Started\n\n\n- [Project Structure](#project-structure)\n- [Commands](#commands)\n    - [Development](#development)\n    - [Production](#production)\n    - [Deploy to Github Pages](#deploy-to-github-pages)\n- [Setup](#setup)\n    - [Quick setup](#quick-setup)\n    - [Complete setup](#complete-setup)\n        - [Create your package.json and customize it](#create-your-packagejson-and-customize-it)\n        - [Install Webpack](#install-webpack)\n        - [Create files](#create-files)\n        - [Add HTML to your generated Bundle](#add-html-to-your-generated-bundle)\n        - [Transplate your JS with Babel](#transplate-your-js-with-babel)\n        - [Styling: import and inject CSS](#styling-import-and-inject-css)\n        - [Import images](#import-images)\n        - [Optimize CSS and Javascript assets](#optimize-css-and-javascript-assets)\n        - [Use Bootstrap](#use-bootstrap)\n        - [Use FontAwesome](#use-fontawesome)\n        - [Deploy to Github Pages](#deploy-to-github-pages)\n        - [Use aliases](use-aliases)\n        - [Use BrowserSync](use-brosersync)\n\n\n\n## Project Structure\n\n```\nProject\n│\n│   README.md\n│   package.json\n│   webpack.config.js\n└───src\n│   │   index.html\n│   │\n│   └───assets\n│       └───js\n│            └───index.js\n│       └───scss\n│            └───styles.scss\n│       └───img\n│            └───logo.png\n│\n└───dist\n\n```\n\n### Commands\n\n#### Development\n\nRun **Webpack** in **Development** mode and start coding!\n\n```\nnpm run dev\n```\n\n#### Production\n\nRun **Webpack** in **Production** mode.\n\n```\nnpm run build\n```\n\n#### Deploy to Github Pages\n\nDeploy your code to **Github Pages**: this script creates a 'gh-pages' branch and serve the production bundle to this branch (ie. [https://leandrodci.github.io/webpack4-boilerplate/](https://leandrodci.github.io/webpack4-boilerplate/))\n\n```\nnpm deploy\n```\n\n\n## Setup\n\n### Quick setup\n\nCreate a directory for your new project, clone this repository, install the required modules and start coding!\n\n```\nmkdir myNewProject \u0026\u0026 cd myNewProject\nclone https://github.com/LeandroDCI/webpack4-boilerplate .\nnpm i\nnpm run dev\n```\n\n### Complete setup\n\nThis is the complete setup\n\n#### Create your package.json and customize it\n\n```\n\nnpm init\n\n```\n\n#### Install Webpack\n\n```\n\nnpm i -D webpack webpack-cli\n\n```\n\ncreate an empty configuration file\n\n```javascript\nconst path = require(\"path\");\n\nmodule.exports = {\n  entry: \"./src/assets/js/index.js\",\n  output: {\n    path: path.resolve(__dirname, \"dist/\"),\n    filename: \"assets/js/bundle.js\",\n    publicPath: \"\"\n};\n```\n\n#### Create files\nCreate a file in **/src/assets/js/index.js** and insert your JS code there.\n\n```javascript\nimport \"../scss/styles.scss\";\nimport logo from \"../img/logo.png\";\n\ndocument.querySelector(\"#logo\").src = logo\n\nlet message = \"Hello Webpack\";\nconsole.log(` Message is: ${message}`);\n```\n\ncreate a file in  **/src/assets/js/styles.scss** and insert your SCSS styles there.\n\n```scss\n\n$font-stack: Helvetica, sans-serif;\n$primary-color: #bb2b2b;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n  text-align: center;\n}\n\nimg {\n  max-width: 500px;\n}\n\n\n```\n\ninsert a logo.png image in **/src/assets/img/logo.png**\n\n#### Add HTML to your generated Bundle\n\nInstall [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) to add a index.html and generated Javascript bundle\n\n```\nnpm i -D html-webpack-plugin\n```\n\nCreate an HTML page\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" /\u003e\n    \u003ctitle\u003e\u003c%= htmlWebpackPlugin.options.title %\u003e\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"assets/js/script.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nand add the configuration to your **webpack.config.js**\n\n```javascript\n//at the beginning of the file\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\n\n//in the configuration -\u003e plugins\nplugins: [\n  new HtmlWebpackPlugin({\n    title: \"Setting up webpack 4\",\n    template: \"index.html\",\n    inject: true,\n    minify: {\n      removeComments: true,\n      collapseWhitespace: true\n    }\n  })\n];\n```\n\n#### Transplate your JS with Babel\n\nInstall [Babel](https://babeljs.io/) to transplate your ES6 down to ES5\n\n```\n\nnpm i -D @babel/core babel-loader @babel/preset-env\n\n```\n\nand add the configuration to your **webpack.config.js**\n\n```javascript\n// in the configuration -\u003e module -\u003e rules\n\n    //babel\n    {\n      test: /\\.js$/,\n      exclude: /node_modules/,\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"@babel/preset-env\"]\n      }\n    }\n  ];\n\n```\n\n#### Styling: import and inject CSS\n\nTo import and use CSS styles we need to add a [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader). Css-loader will import content to a variable and style-loader will inject content into the HTML file as an inline tag. To support SCSS we also need to add [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass).\n\n```\nnpm i -D style-loader css-loader sass-loader node-sass\n```\n\nand add the configuration for the loaders to your **webpack.config.js**\n\n```javascript\n// in the configuration -\u003e module -\u003e rules\n\n    //style and css loader\n    {\n        test: /\\.css$/,\n        use: [\"style-loader\", \"css-loader\", 'sass-loader']\n    }\n\n```\n\nExtracting all CSS into a single file\n\nStyles are now injected as an inline. We will extract styles using [css-mini-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) and we'll move the styles to an external stylesheet file.\nThis stylesheet will be then injected into the index.html automatically.\n\n```\nnpm i -D mini-css-extract-plugin\n```\n\nand add the configuration for css-mini-extract-plugin to your **webpack.config.js**\n\n```javascript\n\n// at the beginning of the file\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\n// in the configuration -\u003e module -\u003e rules\n      {\n        test: [/.css$|.scss$/],\n        use: [\n          MiniCssExtractPlugin.loader,\n          \"css-loader\",\n          \"sass-loader\"\n        ]\n      }\n\n// in the configuration -\u003e plugins\n\nmodule.exports = {\n\n...\n\n  plugins: [\n    ...\n    new MiniCssExtractPlugin({\n      filename: \"assets/css/styles.css\"\n    }),\n    ...\n  ]\n```\n\n#### Import images\n\nTo include images we need to configure [file-loader](https://github.com/webpack-contrib/file-loader)\n\n```\nnpm i -D file-loader\n```\n\nand add the configuration for file-loader to your **webpack.config.js**\n\n```javascript\n// in the configuration -\u003e module -\u003e rules\n\n    //file loader\n    {\n        test: /\\.(png|jpg|gif|svg)$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: '[name].[ext]',\n              outputPath: 'assets/'\n            }\n          }\n        ]\n    }\n\n```\n\n#### Optimize CSS and Javascript assets\n\nWe want to optimize the webapp by minifying our assets with [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) and [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). \nNote: Webpack 4 optimizes JS bundle by default when using **production** mode.\n\n```\nnpm i -D uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin\n```\n\nand add the configuration to your **webpack.config.js**\n\n\n```javascript\n// at the beginning of the file\nconst UglifyJsPlugin = require(\"uglifyjs-webpack-plugin\");\nconst OptimizeCSSAssetsPlugin = require(\"optimize-css-assets-webpack-plugin\");\n\n// in the configuration -\u003e optimization\n\nmodule.exports = {\n...\n\n  optimization: {\n    minimizer: [\n      new UglifyJsPlugin(),\n      new OptimizeCSSAssetsPlugin()\n    ]\n  },\n\n```\n\n#### Use Bootstrap\n\nFor Bootstrap to compile, we need to you install and use the required loaders: postcss-loader with autoprefixer.\n\n```\nnpm i -D postcss-loader autoprefixer \n```\nand add the configuration to your **webpack.config.js**\n\n```javascript\n\n\n// in the configuration -\u003e module -\u003e rules change\n\n      //style and css extract\n      {\n        test: [/.css$|.scss$/],\n        use: [MiniCssExtractPlugin.loader, \"css-loader\", \"sass-loader\", {\n          loader: 'postcss-loader',\n          options: {\n            plugins: () =\u003e [require('autoprefixer')({\n              'browsers': ['\u003e 1%', 'last 2 versions']\n            })],\n          }\n        }]\n      },\n\n```\n\n\nWe can now install Bootstrap module\n\n```\nnpm i bootstrap @fortawesome/fontawesome-free\n```\n\nIn  **/src/assets/js/index.js** import Bootstrap\n\n```javascript\n...\nimport 'bootstrap';\n...\n\n```\nIn  **/src/assets/styles/styles.scss** import Bootstrap\n\n```scss\n...\n@import \"custom\";\n@import \"~bootstrap/scss/bootstrap\";\n...\n\n```\n\nCreate a new file In  **/src/assets/styles/custom.scss** and move your style there\n\n```scss\n\n$theme-colors: (\n  \"primary\": #666969,\n);\n\n$font-stack: Helvetica, sans-serif;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n  text-align: center;\n}\n\nimg {\n  max-width: 500px;\n}\n\n\n```\n\n#### Use Fontawesome\n\nInstall fontawesome\n\n```\nnpm i @fortawesome/fontawesome-free\n```\n\n```\nIn  **/src/assets/styles/styles.scss** set the path and import FA\n\n```scss\n...\n$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';\n@import '~@fortawesome/fontawesome-free/scss/fontawesome';\n@import '~@fortawesome/fontawesome-free/scss/regular';\n@import '~@fortawesome/fontawesome-free/scss/solid';\n@import '~@fortawesome/fontawesome-free/scss/brands';\n...\n\n```\n\nand add the configuration to your **webpack.config.js**\n\n```javascript\n\n// in the configuration -\u003e module -\u003e rules \n\n      //fonts\n      {\n        test: /\\.(woff(2)?|ttf|eot|svg)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n        use: [{\n          loader: 'file-loader',\n          options: {\n            name: '[name].[ext]',\n            outputPath: 'assets/fonts/',\n            publicPath: '../fonts'\n          }\n        }]\n      },\n\n```\n\n\n\n#### Deploy to Github Pages\n\nWe want to publish files to a new branch (called gh-pages) on GitHub using the [gh-pages](https://www.npmjs.com/package/gh-pages) module. \n\n\n```\nnpm i -D gh-pages\n```\n\nIn **package.json** scripts add\n\n```javascript\n  \"deploy\": \"npm run build \u0026\u0026 gh-pages -d dist\",\n```\n\nThis script help us to create a **gh-pages** branch on Github and also serve our bundled files on that branch.\n\n#### Use Aliases\nUsing alias we'll simplify the imports. \nAdd the configuration to your **webpack.config.js**\n\n```javascript\nresolve: {\n    alias: {\n      '@scss': path.resolve(__dirname, 'src/assets/scss'),\n      '@img': path.resolve(__dirname, 'src/assets/img'),\n      '@': path.resolve(__dirname, 'src')\n    }\n  }\n  ```\n\n\nEdit  **/src/assets/js/index.js** and change\n\n```javascript\n\nimport \"@scss/styles.scss\";\nimport logoImg from \"@img/logo.png\";\n\nlet filename = logoImg.substring(logoImg.lastIndexOf('/') + 1);\nlogo.src = `assets/img/${filename}`;\n\n```\n\n#### Use BrowserSync\n\nBrowserSync will start only when you run Webpack in watch mode.\n\n```javascript\nnpm i -D browser-sync-webpack-plugin browser-sync\n```\nand add the configuration to your **webpack.config.js**\n\n```javascript\n//at the beginning of the file\nconst BrowserSyncPlugin = require('browser-sync-webpack-plugin')\n\n//in the configuration -\u003e plugins\nplugins: [\n  ...\n      new BrowserSyncPlugin({\n      host: 'localhost',\n      port: 3000,\n      server: { baseDir: ['dist'] }\n    })\n];\n```\n\n\n***  \n\n### Credits\n\n\nQuality metadata badges from [shields.io](https://shields.io)  \nBackground image from [thepatternlibrary](http://thepatternlibrary.com/#fancy-pants)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandroberlin%2Fwebpack4-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleandroberlin%2Fwebpack4-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandroberlin%2Fwebpack4-boilerplate/lists"}