From 58634bfb222020aa2e01d733cd6cb93b83fc572d Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Mon, 25 Sep 2023 03:46:22 +0100
Subject: [PATCH 1/4] Add webpack lesson content

Covers general bundling, loaders and HtmlWebpackPlugin.
Adjusts assignment links with new resource and NBs.
---
 .../webpack.md                                | 48 +++++++++++++++++--
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/javascript/organizing_your_javascript_code/webpack.md b/javascript/organizing_your_javascript_code/webpack.md
index c382e0f60c3..69ab5c88e7d 100644
--- a/javascript/organizing_your_javascript_code/webpack.md
+++ b/javascript/organizing_your_javascript_code/webpack.md
@@ -1,7 +1,7 @@
 ### Introduction
 We've already introduced webpack in a previous lesson. It is the go-to tool across the web for bundling and compiling JavaScript code. There _are_ other options out there, but at this time none of them are as popular or widely used as webpack.
 
-In our last lesson, we covered the first half of what webpack can do for you: bundling your modules. Another amazing feature is webpack's ability to process and manipulate your code during the compilation step. So, for example, if you would like to use [Sass](http://sass-lang.com/) to write your CSS, webpack can do that for you. Webpack can manage your images and compress and optimize them for use on the web. Webpack can [minify and uglify](https://stackoverflow.com/questions/33708197/does-it-make-sense-to-do-both-minify-and-uglify/33708348) your code. There are tons of things webpack can do, but to access these functions we need to learn more about loaders and plugins.
+In our last lesson, we covered the first half of what webpack can do for you: bundling your modules. Another amazing feature is webpack's ability to process and manipulate your code as it bundles this. So, for example, if you would like to use [Sass](http://sass-lang.com/) or [PostCSS](https://postcss.org/) to write your CSS, webpack can allow you to do that. Webpack can manage your images and compress and optimize them for use on the web. Webpack can [minify and uglify](https://stackoverflow.com/questions/33708197/does-it-make-sense-to-do-both-minify-and-uglify/33708348) your code. There are tons of things webpack can do, but to access these functions we need to learn more about loaders and plugins.
 
 ### Lesson overview
 
@@ -9,16 +9,54 @@ This section contains a general overview of topics that you will learn in this l
 
  - Use webpack by following its documentation.
  - Load assets with webpack.
- - Manage output with webpack.
+ - Manage output with webpack and HtmlWebpackPlugin.
+ - Configure webpack with useful features for development.
+
+ Just in case it helps for any further discussion, I thought I'd write up a quick draft for what I meant above by including our own lesson content in the webpack lesson (since currently it just introduces the lesson overview then dives straight into linking the official tutorials in the assignment with little other context).
+
+### Bundling
+
+As briefly introduced in the previous lesson, if you give webpack a file as an entry point, it will build a dependency graph based on all the imports/exports starting there, before bundling everything into a single `.js` file in `dist`. If for whatever reason you needed it to output multiple bundles (e.g. you have multiple html pages that each need their own), then each entry point you give Webpack will produce its own output bundle.
+
+If you are only dealing with bundling JavaScript then this is fairly straightforward. But what if your project also includes CSS or assets like images or fonts? For CSS, you can import your `.css` file directly into your JavaScript which tells Webpack to handle bundling it. For assets like images, you can load any you use in `src` (whether they are used in your CSS or JavaScript) into `dist`.
+
+However, it cannot do this by itself. Webpack needs to be configured with the correct loaders and rules so that it knows what to do with any non-JavaScript it encounters whilst trying to bundle everything. If you really wanted to, with the right loaders/plugins/rules, you could even do things such as optimize images when you build your project into `dist`. In the assignment links below, you will get to see how you can install and configure these loaders and rules for CSS and assets.
+
+### Html-webpack-plugin
+
+Since we would like to keep all of our development work within `src` and leave `dist` for the production build (the code that you will actually deploy), what about handling HTML files?
+
+Similarly to how we will need loaders and rules for CSS and assets, we can use a plugin called `html-webpack-plugin` which will automatically build an HTML file in `dist` for us when we build our project. It will also then automatically add certain things to the HTML like our output bundle in a `<script>` tag, or the code to use a favicon if we configured it to use one.
+
+By default, it will just create this from a blank template, so the resulting HTML file will essentially be the usual boilerplate with our script and perhaps any other options we add in the configuration. If we had our own `dist/index.html` then it would be overwritten! In order to preserve our own HTML, we can tell it to use a template and provide a path to our own HTML file that is in `src`. You will see more examples of how to set up `html-webpack-plugin` appropriately in the assignment links below.
+
+An example of how to set the template option within your webpack configuration file is as follows:
+
+~~~javascript
+// webpack.config.js
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// ...
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/template.html',
+        }),
+    ],
+// ...
+~~~
 
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
 
 1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to see examples of using webpack to manage your website's assets.
-2. Code along with [this tutorial](https://webpack.js.org/guides/output-management/) to learn how to let webpack automatically manage your index.html and insert your bundle into the page for you!
-3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature you _definitely_ should have taken note of above.
-4. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you might want to use in future projects such as code-splitting, lazy-loading, and tree-shaking. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
+2. Watch [this video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) which demonstrates how to install `html-webpack-plugin` and set different options on it (note that some of the options shown are redundant as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options)).
+    1. The [webpack website's tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.
+3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
+    1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your file paths and work can be kept within `src`.
+    2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course.
+4. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
 
 </div>
 

From 827d30cfa7e090d9acbe683cad3d90120e3d14ba Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Thu, 28 Sep 2023 21:37:35 +0100
Subject: [PATCH 2/4] Remove unintended content and adjust resource description

Adjust existing and add new knowledge checks based
on new lesson content.
---
 javascript/organizing_your_javascript_code/webpack.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/javascript/organizing_your_javascript_code/webpack.md b/javascript/organizing_your_javascript_code/webpack.md
index 69ab5c88e7d..8bf5d2a992a 100644
--- a/javascript/organizing_your_javascript_code/webpack.md
+++ b/javascript/organizing_your_javascript_code/webpack.md
@@ -12,8 +12,6 @@ This section contains a general overview of topics that you will learn in this l
  - Manage output with webpack and HtmlWebpackPlugin.
  - Configure webpack with useful features for development.
 
- Just in case it helps for any further discussion, I thought I'd write up a quick draft for what I meant above by including our own lesson content in the webpack lesson (since currently it just introduces the lesson overview then dives straight into linking the official tutorials in the assignment with little other context).
-
 ### Bundling
 
 As briefly introduced in the previous lesson, if you give webpack a file as an entry point, it will build a dependency graph based on all the imports/exports starting there, before bundling everything into a single `.js` file in `dist`. If for whatever reason you needed it to output multiple bundles (e.g. you have multiple html pages that each need their own), then each entry point you give Webpack will produce its own output bundle.
@@ -51,10 +49,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 <div class="lesson-content__panel" markdown="1">
 
 1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to see examples of using webpack to manage your website's assets.
-2. Watch [this video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) which demonstrates how to install `html-webpack-plugin` and set different options on it (note that some of the options shown are redundant as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options)).
+2. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrates how to install `html-webpack-plugin` and set different options on it (note that some of the options shown are redundant as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options)). Whilst the written instructions do not show any code unlike the video, options are set just like the `template` option example shown above.
     1. The [webpack website's tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.
 3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
-    1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your file paths and work can be kept within `src`.
+    1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your work and any file paths you use can be kept within `src` (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules).
     2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course.
 4. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
 
@@ -67,5 +65,6 @@ This section contains questions for you to check your understanding of this less
 - [How do you load CSS using webpack?](https://webpack.js.org/guides/asset-management/#loading-css)
 - [How do you load images using webpack?](https://webpack.js.org/guides/asset-management/#loading-images)
 - [How do you load fonts using webpack?](https://webpack.js.org/guides/asset-management/#loading-fonts)
-- [How do you load data using webpack?](https://webpack.js.org/guides/asset-management/#loading-data)
+- [How do you automatically build HTML files in `dist` using webpack?](https://webpack.js.org/guides/output-management/#setting-up-htmlwebpackplugin)
+- [How do you automatically build an HTML file in `dist` using a custom template in `src`?](https://rapidevelop.org/webpack/setup-html-webpack-plugin)
 - [How would you track errors in bundled source code?](https://webpack.js.org/guides/development/)

From 857f15abe4e5f0cb01da8d04e7bbc6df4f9ad8d2 Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Thu, 28 Sep 2023 23:19:17 +0100
Subject: [PATCH 3/4] Improve wording

---
 .../organizing_your_javascript_code/webpack.md   | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/javascript/organizing_your_javascript_code/webpack.md b/javascript/organizing_your_javascript_code/webpack.md
index 8bf5d2a992a..4f495cdb94c 100644
--- a/javascript/organizing_your_javascript_code/webpack.md
+++ b/javascript/organizing_your_javascript_code/webpack.md
@@ -16,9 +16,9 @@ This section contains a general overview of topics that you will learn in this l
 
 As briefly introduced in the previous lesson, if you give webpack a file as an entry point, it will build a dependency graph based on all the imports/exports starting there, before bundling everything into a single `.js` file in `dist`. If for whatever reason you needed it to output multiple bundles (e.g. you have multiple html pages that each need their own), then each entry point you give Webpack will produce its own output bundle.
 
-If you are only dealing with bundling JavaScript then this is fairly straightforward. But what if your project also includes CSS or assets like images or fonts? For CSS, you can import your `.css` file directly into your JavaScript which tells Webpack to handle bundling it. For assets like images, you can load any you use in `src` (whether they are used in your CSS or JavaScript) into `dist`.
+If you are only dealing with bundling JavaScript then this is fairly straightforward. But what if your project also includes CSS or assets like images or fonts? For CSS, you can import your `.css` file directly into your JavaScript and for assets like images, they might be used inside your CSS or imported directly into your JavaScript. When you tell Webpack to bundle your files, it will come across these files and try to bundle them together or process any assets like images and copy them into `dist`.
 
-However, it cannot do this by itself. Webpack needs to be configured with the correct loaders and rules so that it knows what to do with any non-JavaScript it encounters whilst trying to bundle everything. If you really wanted to, with the right loaders/plugins/rules, you could even do things such as optimize images when you build your project into `dist`. In the assignment links below, you will get to see how you can install and configure these loaders and rules for CSS and assets.
+Since these sorts of files are not JavaScript, however, Webpack will not know how to process them unless you tell it how to by including the correct loaders and rules. If you really wanted to, with the right loaders/plugins/rules, you could even do things such as image optimization when you build your project into `dist`. In the assignment links below, you will get to see how you can install and configure these loaders and rules for CSS and assets.
 
 ### Html-webpack-plugin
 
@@ -26,9 +26,7 @@ Since we would like to keep all of our development work within `src` and leave `
 
 Similarly to how we will need loaders and rules for CSS and assets, we can use a plugin called `html-webpack-plugin` which will automatically build an HTML file in `dist` for us when we build our project. It will also then automatically add certain things to the HTML like our output bundle in a `<script>` tag, or the code to use a favicon if we configured it to use one.
 
-By default, it will just create this from a blank template, so the resulting HTML file will essentially be the usual boilerplate with our script and perhaps any other options we add in the configuration. If we had our own `dist/index.html` then it would be overwritten! In order to preserve our own HTML, we can tell it to use a template and provide a path to our own HTML file that is in `src`. You will see more examples of how to set up `html-webpack-plugin` appropriately in the assignment links below.
-
-An example of how to set the template option within your webpack configuration file is as follows:
+By default, it will create this from a blank template, so the resulting HTML file will essentially be the usual boilerplate with our script and perhaps any other options we add in the configuration. If we had our own `dist/index.html` then it would be overwritten! In order to preserve our own HTML, we can tell it to use a template and provide a path to our own HTML file that is in `src`. You will see more examples of how to set up `html-webpack-plugin` appropriately in the assignment links below, but an example of how to set the template option within your webpack configuration file is as follows:
 
 ~~~javascript
 // webpack.config.js
@@ -48,10 +46,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 <div class="lesson-content__panel" markdown="1">
 
-1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to see examples of using webpack to manage your website's assets.
-2. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrates how to install `html-webpack-plugin` and set different options on it (note that some of the options shown are redundant as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options)). Whilst the written instructions do not show any code unlike the video, options are set just like the `template` option example shown above.
-    1. The [webpack website's tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.
-3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
+1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to learn how to use webpack to manage your website's assets.
+2. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrate how to install `html-webpack-plugin` and set different options on it (note that you do not need to include some of the options mentioned as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options) if you leave them out). Whilst the written instructions do not show any code unlike the video, any options would be set just like the `template` option example shown above.
+    1. This [tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.
+3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) (up until "Choosing a Development Tool") talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
     1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your work and any file paths you use can be kept within `src` (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules).
     2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course.
 4. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!

From 9ca071270165a2b2a96491da5db0a425ae9879f1 Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Sat, 30 Sep 2023 02:22:19 +0100
Subject: [PATCH 4/4] Add mention of dev/prod mode and webpack-merge

---
 javascript/organizing_your_javascript_code/webpack.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/javascript/organizing_your_javascript_code/webpack.md b/javascript/organizing_your_javascript_code/webpack.md
index 4f495cdb94c..59e8547ea1b 100644
--- a/javascript/organizing_your_javascript_code/webpack.md
+++ b/javascript/organizing_your_javascript_code/webpack.md
@@ -49,10 +49,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to learn how to use webpack to manage your website's assets.
 2. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrate how to install `html-webpack-plugin` and set different options on it (note that you do not need to include some of the options mentioned as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options) if you leave them out). Whilst the written instructions do not show any code unlike the video, any options would be set just like the `template` option example shown above.
     1. This [tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course.
-3. Finally, the first part of [this tutorial](https://webpack.js.org/guides/development/) (up until "Choosing a Development Tool") talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
+3. The first part of [this tutorial](https://webpack.js.org/guides/development/) (up until "Choosing a Development Tool") talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack.
     1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your work and any file paths you use can be kept within `src` (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules).
     2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course.
-4. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
+4. Setting our webpack configuration to development mode is naturally most suitable for our development work, but when we come to build our projects for deployment (production), the dedicated production mode optimises this for us. Instead of manually switching between modes in the configuration file as needed, [this tutorial](https://webpack.js.org/guides/production/) introduces `webpack-merge`. This can be quite useful as a quick setup can allow us to have a dedicated npm script for development builds/dev server, and another specifically for our production build.
+5. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
 
 </div>