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
* ejs - templating

#### 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

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.