blog/todo-webpack.todo

@@ -1,11 +1,11 @@
 App.js:
-  ☐ Document using the `/* webpackChunkname: "name" */
+  ✔ Document using the `/* webpackChunkname: "name" */ @done (5/29/2020, 12:34:27 AM)
-  ☐ What does `const { default: App }` do?
+  ✔ 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>.
+  ✔ Add `purgecss-webpack-plugin`: <https://pusher.com/tutorials/webpack-part-7>. @done (5/29/2020, 12:46:26 AM)
-    Notes:
+  Notes:
-      Do this after the html templates have been added - this will only import the css classes that have been used.
+    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)

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.

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,
+      }),
+    }),
+```