{"id":13851587,"url":"https://github.com/Lemoncode/webpack-by-sample","last_synced_at":"2025-07-13T03:32:35.414Z","repository":{"id":66220150,"uuid":"83299094","full_name":"Lemoncode/webpack-by-sample","owner":"Lemoncode","description":"Learn webpack by sample, each of the samples contains a readme.md file that indicates the purpose of the sample plus an step by step guide to reproduce it.","archived":false,"fork":false,"pushed_at":"2020-06-22T10:51:55.000Z","size":5400,"stargazers_count":189,"open_issues_count":1,"forks_count":67,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-11-13T07:22:55.115Z","etag":null,"topics":["samples","webpack","webpack-sample","webpack3","webpack4"],"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/Lemoncode.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}},"created_at":"2017-02-27T10:42:44.000Z","updated_at":"2024-08-28T09:26:25.000Z","dependencies_parsed_at":"2024-01-18T10:24:18.639Z","dependency_job_id":"f074f31d-f124-49ef-8eef-fff001ef1f62","html_url":"https://github.com/Lemoncode/webpack-by-sample","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/Lemoncode%2Fwebpack-by-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebpack-by-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebpack-by-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fwebpack-by-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/webpack-by-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225855326,"owners_count":17534962,"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":["samples","webpack","webpack-sample","webpack3","webpack4"],"created_at":"2024-08-04T22:00:36.074Z","updated_at":"2024-11-22T06:30:32.494Z","avatar_url":"https://github.com/Lemoncode.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Webpack by sample\n\nLearn webpack by sample, each of the samples contains a `readme.md` file that\nindicates the purpose of the sample plus an step by step guide to reproduce it.\n\nThe Lemoncode Frontend Master Students are working on a review process, if you want to cooperate in this process or add more useful samples don't hesitate to contact us, fork the project and asking for PR once ready.\n\n# Demos\n\n## 00 Intro\n\n### 00 Boilerplate\n\nIn this sample we are going to setup a web project that can be easily managed\nby webpack.\n\nWe will setup an initial npm project, give support to ES6, and install webpack.\n\nWe will create a `hellword.js` sample.\n\nSummary steps:\n - Intialize `package.json` (npm init)\n - Create a simple HTML file.\n\n### 01 Import\n\nIn this sample we are going to start working with ES6 modules (import).\n\nWe will start from sample _00 Intro/00 Boilerplate_ and add a new JavaScript service that will\nhold a simple algorithm to calculate the average of an score array.\n\nWe will use this JavaScript array into the main `students.js` file by importing\nit.\n\nSummary steps:\n - Add a new file `averageService.js`\n - Add an array on `students.js`\n - Import averageService into `students.js`\n - Use the averageService features inside the `students.js` code.\n - Transpile and test on `index.html`\n\n\n### 02 Server\n\nIn this sample we are going to enter into \"dev mode\". Working with files service\nis not ideal when you are developing a web application, we will learn how to launch\na lite web server, how deploy our bundle into a dist folder (including `index.html`)\n, how to debug our es6 code directly into the browser debugger and minify\nour `bundle.js`.\n\nWe will start from sample _00 Intro/01 Import_, install `webpack-dev-server`, setup our config\nto deploy on config folder and support maps (debug), then we will minify\nour `bundle.js` file via webpack cli params.\n\nSummary steps:\n - Install via npm webpack-dev-server.\n - Execute webpack-dev-server with live reload.\n - Add start command to `package.json`.\n\n\n### 03 Output\n\nIn this sample we are going to setup a dist folder where the webpack bundle and\nmain HTML page will be copied to.\n\nWe will start from sample _00 Intro/02 Server_,\n\nSummary steps:\n - Redirect output (`bundle.js`) to \"dist\" folder.\n - Include into the build proccess: copying the `index.html` file to \"dist\" folder\n - Let webpack include the `bundle.js` script into the `index.html` file.\n - Add map support in order to enable ES6 files to be debugged directly on the browser.\n - Generate a minified version of the `bundle.js`.\n\n### 04 JQuery\n\nSo far we have made good progress on our journey... but we are lacking one of the\nbasic pillars of web development, consuming third party libraries.\n\nIn this demo we will install a legacy library (jquery) via npm, define it as global, and use it. Finally we will end up creating a separate bundle for libraries.\n\nWe will start from sample _00 Intro/03 Output_.\n\nSummary steps:\n - Install jquery via npm.\n - Setup a global alias ($).\n - Create some sample code using this library.\n - Break into two bundles `app.js` and `vendor.js`.  \n\n\n## 01 Styles\n\n### 01 Custom CSS\n\nLet's get started working with styles.\n\nIn this demo will create a custom CSS file (it will contain a simple css class\nthat will setup a background color to red).\n\nWe will start from sample _00 Intro/04 JQuery_.\n\nSummary steps:\n - Create a custom css file.\n - Install style loader and css loader packages.\n - Configure webpackconfig.\n\n\n### 02 Import Bootstrap\n\nIn this demo we will install and configure webpack to import the well known\n[Bootstrap](https://getbootstrap.com/) CSS library.\n\nWe will start from sample _01 Styles / 01 Custom CSS_.\n\nSummary steps:\n - Install Bootstrap.\n - Import the CSS library.\n - Use a jumbotron element from Bootstrap in our HTML.\n - Check that we get errors when running webpack.\n - Install additional loaders in order to manage fonts and other\n files required by Bootstrap.\n - Check results.\n\n### 03 SASS\n\nIn this demo we rename our css file to scss extension and add a simple SASS variable. We will learn how to add a loader that can\nmake the SASS preprocess and then chain it to our css / style pipe.\n\nWe will start from sample _01 Styles/02 Import Bootstrap_.\n\nSummary steps:\n - Rename `mystyles.css` to scss.\n - Add some SASS specific code.\n - Install a SASS preprocessor loader.\n - Add this preprocessor to the pipe (update `webpack.config.js`).\n\n### 04 Handling Images\n\nIn this demo we are going to include images in our project in two flavours: via JavaScript and via HTML.\nOn the JavaScript side we will see it's something straightforward (using the same plugins we used for fonts), for the HTML we will use a new loader: [html-loader](https://github.com/webpack-contrib/html-loader).\n\nWe will start from sample _01 Styles/03 SASS_.\n\nSummary steps:\n- Add two images to our project.\n- Add first image from HTML.\n- Add second image from JavaScript.\n- Configure the loader.\n\n### 05 Import Materialize\n\nIn this demo we will install and configure webpack to import the Google framework [Materialize](http://materializecss.com/).\n\nWe will start from sample _01 Styles / 01 Custom CSS_.\n\nSummary steps:\n - Fix jQuery dependency version.\n - Install Materialize.\n - Import the CSS and JS library.\n - Use a card element from Materialize in our HTML.\n - Check that we get errors when running webpack.\n - Install additional loaders in order to manage fonts and other\n files required by Materialize.\n - Check results.\n\n## 02 Fx (frameworks / libraries / languages)\n\n### 00 TypeScript\n\nIn this demo we will add support for TypeScript.\n\nWe will start from sample _01 Styles/03 SASS_, install TypeScript locally,\nconfigure a tsconfig file, add some ts like, install awesome-typescript-loader and apply it to webpackconfig.\n\nSummary steps:\n - Remove babel configuration.\n - Install TypeScript as a local dependency.\n - Configure TypeScript for our project (tsconfig)\n - Port our project to TypeScript and add use in our code some of the ts features.\n - Install [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader).\n - Add the proper configuration in `webpack.config.js`\n\n### 01 React\n\nIn this demo we will add support for React.\n\nWe will start from sample _01 Styles / 03 SASS_, install React locally, update `students.js` to `students.jsx` and include some basic rendering.\n\nSummary steps:\n - Install [React](https://facebook.github.io/react/) as a local dependency.\n - Update `students.js` to `students.jsx` and update its content accordingly.\n - Resolve the `jsx` extensions and point out that the entry point has changed.\n - Configure the `webpack.config.js` to support `jsx`.\n\n### 02 Angular\n\nIn this sample we are going to create a simple Angular 1.x sample (es6 based).\n\nWe will start from sample _01 Styles/03 SASS_.\n\nSummary steps:\n - Installing Angular 1.x libraries.\n - Creating the app.\n - Instantiating the app from the html.\n - Creating a component (inline HTML).\n - Creating a service.\n - Displaying the component.\n - Creating an external HTML template and consuming it.\n\n### 03 Angular 2\n\nIn this sample we are going to setup a basic Angular 2 app with Webpack.\n\nWe will start from sample _02 Fx/00 TypeScript_.\n\nSummary steps:\n - Install Angular 2.x libraries.\n - Create the app.\n - Instantiate the app from the html.\n - Create a component (inline HTML).\n - Create a service.\n - Display the component.\n - Create an external HTML template and consuming it.\n\n\n## 03 Environments (development and production configs)\n\n### 01 Linting\n\nIn this sample we are going to introduce Linting. This is a technique which you can analyse code for potential errors, so that can help you to make less mistakes.\n\nWe will start from sample _01 Styles/03 SASS_.\n\nSummary steps:\n - Installing ESLint.\n - Configuring ESLint.\n - Connecting with Babel.\n - Connecting with Webpack.\n - Adding custom rules.\n\n### 02 CSS Modules\n\nIn this demo we are going to isolate different scss files using same css class names.\nWe will learn how to configure it and how to deal with external css class provided by third libraries like Bootstrap.\n\nWe will start from sample _02 Fx/01 React_.\n\nSummary steps:\n- Update `webpack.config.js` with CSS Modules config.\n- Add scss file with averageComponent styles.\n- Create other component and scss file with same class name.\n- Create selector using custom class and Bootstrap class.\n\n### 03 HMR\n\nIn this demo we are going to configure Hot Module Replacement. This feature is great for productivity in development environment, allowing us to update the app code without having to redeploy the whole files or refresh our browser to get the changes updated.\n\nWe will start from sample _03 Environments/02 CSS Modules_.\n\nSummary steps:\n- Update `webpack.config.js` with HMR config.\n- Install `react-hot-loader`.\n- Update `student.jsx` file.\n- Create `index.jsx` file.\n\n### 04 Production Configuration\n\nIn this demo we are going to create different builds for each environment.\nWe will learn how to configure it and how to reduce bundle file sizes.\n\nWe will start from sample _03 Environments/03 HMR_.\n\nSummary steps:\n- Add base webpack config file\n- Add webpack-merge package.\n- Add development config file.\n- Add production config file.\n\n## 04 Peformance\n\n### 01 Tree Shaking ES6\n\nOn of the most interest features that ships Webpack 2 and it has Webpack 3 too, is Tree Shaking: this allows to remove from a destination bundle the exports that are not in use by the project, reducing dramatically the site of our bundle.\n\nWe will start from sample _01 Styles/03 SASS_ and we are going to create a simple sample in ES6:\n\n- A calculator module where we create an export per basic operation (sum, substract, mul, div..).\n\n- A `main.js` file that will import this calculator module and use only sum operation.\n\nWe will use webpack's 2 tree shaking and check that we end up having a bundle that doesn't contain the code for substract, mul, and div\n\n### 02 Tree Shaking TypeScript\n\nOn of the most interest features that ships Webpack 2 and it has Webpack 3 too, is Tree Shaking: this allows to remove from a destination bundle the exports that are not in use by the project, reducing dramatically the site of our bundle.\n\nWe will start from sample _02 Fx/00 TypeScript_ and we are going to create a simple sample in TypeScript:\n\n- A calculator module where we create an export per basic operation (sum, substract, mul, div..).\n\n- A `main.js` file that will import this calculator module and use only sum operation.\n\nWe will use webpack's 2 tree shaking and check that we end up having a bundle that doesn't contain the code for substract, mul, and div\n\n### 03 Reduce TypeScript build time\n\nIn this demo we are going to play with the build time speed with Webpack and TypeScript. For that, we are going to configure `awesome-typescript-loader` options.\n\nWe will start from sample _04 Performance/02 Tree shaking TypeScript_.\n\nSummary steps:\n- Take some base measures.\n- Apply `useCache` flag.\n- Apply CheckerPlugin.\n\n### 04 DLL plugin\n\nIn this demo we are going to play with the build time speed installing `autodll-webpack-plugin`.\n\nWe will start from sample _04 Performance/03 Reduce TypeScript build time_.\n\nSummary steps:\n- Take some base measures.\n- Configure `autodll-webpack-plugin`.\n- See new measures.\n\n\n## 05 Misc (other samples)\n\n### 01 Commons Chunk Plugin\n\nIn this demo we will learn how to split our application in different bundles and how does Webpack manage to do so with the CommonsChunkPlugin.\nWe will also learn some tips and tricks.\n\nWe will start from sample _02 Fx/00 TypeScript_.\n\nSummary steps:\n- Comment out the CommonsChunkPlugin to analyze what happens.\n- Add it back and see the changes.\n- Add a new third party library and see how the inline vendor grows.\n- create a vendor file as an alternative to inline vendor in the config.\n- move all the vendors imports there.\n\n### 02 DefinePlugin\n\nIn this demo, we will see how can we do a basic usage of environment variables to enable the production mode of Angular\n\nWe will start from sample _02 Fx/03 Angular 2_.\n\nSummary steps:\n- importing enableProdMode on index.ts.\n- adding an if clause that will enableProdMode based on the -p parameter.\n\n### 03 DefinePlugin advanced\n\nThis demo shows how to have alternative API_URL for development and production\n\nStarts from sample _03 Environments/04 Production Configuration_.\n\nSummary steps:\n- create a students service and a student list component\n- See it working with hardcoded data\n- Update the service to use the dev endpoint\n- Update the component to use async data.\n- Update the dev and prod config to have environment variables\n- Update the services to use the new environment variables.\n\n### 04 Right pad library\n\nDo you want to create a library? This example is for you.\n\nWe will start from scratch in here\n\nSummary steps:\n- npm init, to initialize the repo\n- install dependencies\n- create webpack config for libraries\n- put some tsconfig for typescript\n- generate library to see it working\n- add d.ts generation features\n- try it with \"npm link\"\n\n### 05 Right pad usage\n\nHere we try our new shiny library\n\nWe start from sample _02 Fx/00 TypeScript_.\n\nSummary steps:\n- npm install\n- npm link right-pad\n- add right pad usage into students.ts\n- profit.\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Fwebpack-by-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLemoncode%2Fwebpack-by-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Fwebpack-by-sample/lists"}