Updating documentation

blog/todo-webpack.todo

@@ -1,3 +1,11 @@
 App.js:
   ☐ Document using the `/* webpackChunkname: "name" */
   ☐ What does `const { default: App }` do?
+
+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.
+
+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.

blog/webpack-structure.md

@@ -139,6 +139,8 @@ This file is for production builds.
 | --------------- | ------------------------ | ----------------------------------------------- |
 | `webpack-merge` | `yarn add webpack-merge` | Merge webpack configs for common, dev and prod. |
 
+This will configure webpack for javascript files.
+
 A bare basic config should look like:
 
 ```javascript
@@ -158,3 +160,66 @@ module.exports = merge(common, {
 ```
 
 The output files are using dynamic naming in `webpack`. We include the `contenthash` in the files to assist with caching. If you don't want to use dynamic importing, you can take this out for semi-static naming. Alternatively, use optimization settings to only output 1 `css` and `js` file - but for large files this will be unoptimal.
+
+For `css` and `scss` files we should add additional config.
+
+| Package                   | Command                            | Description                                                                              |
+| ------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------- |
+| `mini-css-extract-plugin` | `yarn add mini-css-extract-plugin` | Extracts css files into seperate files. It creates a seperate css file per each js file. |
+
+Built in webpack plugins:
+
+| Plugin           | Command                   | Description                                                                                                                                                                                                                                                     |
+| ---------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `css-loader`     | `yarn add css-loader`     | Allows the import of css files in javascript.                                                                                                                                                                                                                   |
+| `postcss-loader` | `yarn add postcss-loader` | Will add additional css to your files for compatibility across multiple browsers and versions. Uses a `postcss.config.js` file. If you are using css modules, you should add config to the css loader: <https://github.com/postcss/postcss-loader#css-modules>. |
+| `sass-loader`    | `yarn add sass-loader`    | Allows the import of scss files with javascript.                                                                                                                                                                                                                |
+| `style-loader`   | `yarn add style-loader`   | Injects css into the DOM.                                                                                                                                                                                                                                       |
+
+We should create the `postcss.config.js` file. This config will ensure our css is compatible across the previous 2 versions of each browser:
+
+```javascript
+module.exports = {
+  plugins: {
+    "postcss-present-env": {
+      browsers: "last 2 versions",
+    },
+  },
+};
+```
+
+We should add to our `webpack.prod.js` file.
+
+For the `module` object we should create a rule for all `scss`, `sass` and `css` files. We should specify the loaders in order (bottom comes first!).
+
+Don't forget to add the `const MiniCssExtractPlugin = reuire("mini-css-extract-plugin");` to the top imports.
+
+```javascript
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          "style-loader",
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+```
+
+For the `plugins` object we should configure our `MiniCssExtractPlugin` which will configure how split css files are named (exactly like the `output` object which is for javascript files. CSS is done with a plugin.)
+
+```javascript
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].min.css",
+      chunkFilename: "[name].[contenthash].min.css",
+      sourceMap: true,
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+  ],
+```