From fb9f4e9a2193329dc162fddd8112a08cc788baf2 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Fri, 29 May 2020 03:56:23 +0100
Subject: [PATCH] Updating documentation

---
 blog/themes/.DS_Store         | Bin 10244 -> 10244 bytes
 blog/todo-webpack.todo        |  12 ++++-----
 blog/webpack-filestructure.md |   6 +++++
 blog/webpack-structure.md     |  45 ++++++++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/blog/themes/.DS_Store b/blog/themes/.DS_Store
index c3020a3f8ae92da9085d31d3cd870e3d3a16e7b8..034e101890695b06eb6e235b29c20929e2e551f0 100644
GIT binary patch
delta 36
scmZn(XbG6$&nUDpU^hRb&}JTii|m_IB^I$yZ0Oj`u5gWga;k(n0O^$sfB*mh

delta 115
zcmZn(XbG6$&nU7nU^hRb$Yvgai|it~`7SO=Ir&Kp3=ABFJoj4`Ss!wooGWeslt{sl
j*t}N!68mO$g=_5U*z^I-5MwA{NMy(Z;#7tbhD-(kca0-D

diff --git a/blog/todo-webpack.todo b/blog/todo-webpack.todo
index d3c8154..098d9d9 100644
--- a/blog/todo-webpack.todo
+++ b/blog/todo-webpack.todo
@@ -1,11 +1,11 @@
 App.js:
-  ☐ Document using the `/* webpackChunkname: "name" */
-  ☐ What does `const { default: App }` do?
+  ✔ Document using the `/* webpackChunkname: "name" */ @done (5/29/2020, 12:34:27 AM)
+  ✔ What does `const { default: App }` do? @done (5/29/2020, 12:34:29 AM)
 
 Plugins:
-  ☐ Add `purgecss-webpack-plugin`: <https://pusher.com/tutorials/webpack-part-7>.
-    Notes:
-      Do this after the html templates have been added - this will only import the css classes that have been used.
+  ✔ Add `purgecss-webpack-plugin`: <https://pusher.com/tutorials/webpack-part-7>. @done (5/29/2020, 12:46:26 AM)
+  Notes:
+    Do this after the html templates have been added - this will only import the css classes that have been used.
 
 Layout:
-  ☐ Make sure the contents of app.js and main.js are documented. Specifically the content of main.js so it imports the app.js.
+  ✔ Make sure the contents of app.js and main.js are documented. Specifically the content of main.js so it imports the app.js. @done (5/29/2020, 12:46:35 AM)
diff --git a/blog/webpack-filestructure.md b/blog/webpack-filestructure.md
index 2925f65..55c64dd 100644
--- a/blog/webpack-filestructure.md
+++ b/blog/webpack-filestructure.md
@@ -10,6 +10,12 @@ You can bundle anything up, we can even write `scss` and have webpack lint, comp
 
 ## Structure
 
+Overview:
+
+- When adding a new `scss` library add it to the `styles.scss` file using `@import`.
+- When adding a new `js` library add it to the `main.js` library using `import`.
+- You can split out your imports into subfiles, remember to import that file into the two files above.
+
 ### Folder structure
 
 The structure can depend on the project. If you are using webpack you can create `./src` folder where you can place `./src/js` or `./src/scss` for example. We can have a `./node_modules` folder then use webpack to compile.
diff --git a/blog/webpack-structure.md b/blog/webpack-structure.md
index c183436..655d1c3 100644
--- a/blog/webpack-structure.md
+++ b/blog/webpack-structure.md
@@ -225,3 +225,48 @@ We need to add the `webpack.HashedModuleIdsPlugin` to the plugins since we are u
     new webpack.HashedModuleIdsPlugin(),
   ],
 ```
+
+Webpack will automatically minimise all js files by default in production mode using Terser. For more control over this we should add, import and configure it in the minimizer object.
+
+| Plugin                  | Command                          | Description                 |
+| ----------------------- | -------------------------------- | --------------------------- |
+| `terser-webpack-plugin` | `yarn add terser-webpack-plugin` | Minimizes javascript files. |
+
+Import the module in the `webpack.prod.js`, then add the minimizer options to the `optimization` object:
+
+```javascript
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ extractComments: false })],
+  },
+```
+
+Add a css minmizer:
+
+| Plugin                               | Command                                       | Description         |
+| ------------------------------------ | --------------------------------------------- | ------------------- |
+| `optimize-css-assets-webpack-plugin` | `yarn add optimize-css-assets-webpack-plugin` | Minmizes css files. |
+
+Finally we should add the Purge CSS plugin:
+
+| Plugin                    | Command                            | Description                                                                                                                                    |
+| ------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `purgecss-webpack-plugin` | `yarn add purgecss-webpack-plugin` | Scans a directory for files, and will only include css classes that it finds referenced. This can greatly reduce the size of your stylesheets. |
+
+We should import it:
+
+```javascript
+const PurgeCssPlugin = require("purgecss-webpack-plugin");
+const glob = require("glob");
+const path = require("path");
+```
+
+And add it to the `plugins` object:
+
+```javascript
+    new PurgeCssPlugin({
+      paths: glob.sync(path.join(__dirname, "layouts") + "/**/*.html", {
+        nodir: true,
+      }),
+    }),
+```