webpack-configs/notes.md

Requirements

* html
	- templating
* js
	- babel transpilation
	- source maps
	- minification on production
	- eslint
* css preprocessing
	- nested selectors
	- variables
	- mixins
	- functions
	- autoprefixer
	- imports
	- source maps
	- minification on production
	- stylelint
* live server with hmr
* clean dist directories

## NOT INCLUDED
* code splitting


#### html

* html-webpack-plugin - automatically create index.html or use a template file
	also takes care of templating - default templating is ejs

#### js

* @babel/core
	- also takes care of minification in production
* @babel/preset-env
* babel-loader
* eslint
* eslint-webpack-plugin

#### css

* css-loader
* style-loader - injects css into dom (defaults to style tags) 
* mini-css-extract-plugin - extracts css to separate files
* postcss-loader
* postcss-preset-env
	takes care of autoprefixing(?) (supposedly nesting too but i needed to install
	postcss-nested)
* postcss-nested
* postcss-import
* postcss-mixins
* postcss-functions
* cssnano-webpack-plugin
* stylelint
* stylelint-webpack-plugin

#### other

* clean-webpack-plugin


#### live server
* webpack-dev-server



## Installation notes

make repository private - edit package.json  
replace
`"main": "index.js"`
with
`"private": "true"`


## Notes

when specifying the css minimizer in the config, this causes us to no longer be
using the defaults (which includes js minification for production). This means
we have to tell webpack to minimise the js explicitly (or use to also  defaults with '...')

Asset management:

>= webpack 5.0 - use asset modules (replaces raw-loader, url-loader, file-loader)

```
module: {
     rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
```

Now, when you import MyImage from './my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing.
When using the css-loader, as shown above, a similar process will occur for url('./my-image.png') within your CSS. The loader will recognize this is a local file, and replace the './my-image.png' path with the final path to the image in your output directory.
The html-loader handles <img src="./my-image.png" /> in the same manner.

If we don't want the loader to treat it as a local file we can use (in webpack.config.js):
- html-loader - use urlFilter option
- css-loader - url option -> filter function

types - asset/resource (file-loader), asset/inline (url-loader), asset/source (raw-loader), asset (url-loader)
for `asset` default size is 8kb. - can configure see
[docs](https://webpack.js.org/guides/asset-modules/). 

## Environment variables

to use environment variables, must change module.exports to use a function.