├── .gitignore ├── package.json ├── src └── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tutorial", 3 | "version": "1.0.0", 4 | "description": "This is a Readme file.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | }, 14 | "dependencies": { 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Please don't use the master branch. 2 | // There are separate git branches in this repository related to each Lesson. They are usually named the same as the Lessons are named. For example, if you are watching Lesson 33 "How To Generate Multiple HTML Files", there are 2 branches related to this lesson: 3 | // - how-to-generate-multiple-html-files-begin 4 | // - how-to-generate-multiple-html-files-end 5 | 6 | // There is a separate video explaining how to use Github repository in this course. 7 | // In this video I talk about how to switch between branches and how to use the repository. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Overview 2 | 3 | This repository was designed to help you with learning Webpack 5. 4 | 5 | This repository is a supplementary resource to the course ["Webpack 5: The Complete Guide For Beginners"](https://www.udemy.com/course/webpack-from-beginner-to-advanced/?referralCode=6348A0DAFB30D091F7F3). 6 | 7 | If you want to get a discount (up to 70%) on one of my other courses, feel free to send me an email at vp.online.courses@gmail.com, and I will try to get the best offer for you. 8 | 9 | ## Clone This Repository 10 | 11 | 1. ```git clone https://github.com/vp-online-courses/webpack-tutorial.git``` 12 | 1. ```cd webpack-tutorial``` 13 | 14 | ## Branches 15 | 16 | This repository consists of many branches, which correspond to different lessons of the course. 17 | Every lesson that requires code changes has 2 branches associated with it: 18 | 19 | 1. First branch points to the beginning of the lesson. 20 | 1. Second branch points to the end of the lesson. 21 | 22 | Let's take as an example *"Minification Of The Resulting JavaScript Bundles"* lesson. 23 | There are 2 branches associated with it: 24 | 1. *minification-of-the-resulting-javascript-bundles-begin*. You can check out this branch right before starting the lesson and repeat all the steps from the lesson while watching it. 25 | 2. *minification-of-the-resulting-javascript-bundles-end*. If you want to see how the application looks like at the end of this lesson, you can check out this branch. 26 | 27 | Don't forget to run ```npm install``` when switching branches. 28 | - ```git checkout minification-of-the-resulting-javascript-bundles-begin``` 29 | - ```npm install``` 30 | 31 | There are 2 special branches that you may want to check out: 32 | - single-page-application. Contains webpack configuration for a Single Page Application. 33 | - multiple-page-application. Contains webpack configuration for a Multiple Page Application. 34 | 35 | 36 | #### Please don't use the master branch 37 | 38 | There are separate git branches in this repository related to each Lesson. They are usually named the same as the Lessons are named. For example, if you are watching Lesson 33 "How To Generate Multiple HTML Files", there are 2 branches related to this lesson: 39 | 40 | - how-to-generate-multiple-html-files-begin 41 | - how-to-generate-multiple-html-files-end 42 | 43 | There is a separate video explaining how to use Github repository in this course. 44 | In this video I talk about how to switch between branches and how to use the repository. 45 | 46 | ## Single Page Application 47 | 48 | #### Run in Development Mode 49 | 50 | 1. ```git checkout single-page-application``` 51 | 1. ```npm run dev``` 52 | 53 | Application will be served on the ```http://localhost:9000/```. 54 | 55 | #### Run in Production Mode 56 | 57 | 1. ```git checkout single-page-application``` 58 | 1. ```npm run build``` 59 | 1. ```npm start``` 60 | 61 | Application will be served on the ```http://localhost:3000/```. 62 | 63 | ## Multiple Page Application 64 | 65 | #### Run in Development Mode 66 | 67 | 1. ```git checkout multiple-page-application``` 68 | 1. ```npm run dev``` 69 | 70 | Application will be served on the ```http://localhost:9000/```. 71 | It will show an empty page. 72 | 73 | In order to go to the "Hello World" page, go to ```http://localhost:9000/hello-world.html```. 74 | 75 | In order to go to the "Kiwi" page, go to ```http://localhost:9000/kiwi.html```. 76 | 77 | 78 | #### Run in Production Mode 79 | 80 | 1. ```git checkout multiple-page-application``` 81 | 1. ```npm run build``` 82 | 1. ```npm start``` 83 | 84 | Application will be served on the ```http://localhost:3000/```. 85 | It will show an empty page. 86 | 87 | In order to go to the "Hello World" page, go to ```http://localhost:3000/hello-world```. 88 | 89 | In order to go to the "Kiwi" page, go to ```http://localhost:3000/kiwi```. 90 | --------------------------------------------------------------------------------