css-framework/notes.md

78 lines
2.0 KiB
Markdown

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
* ejs-compiled-loader (for use with the ejs templates)
bit of a fuck on getting it to work - [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46)
#### js
* @babel/core
- also takes care of minification in production
* @babel/preset-env
* babel-loader
* eslint
* eslint-webpack-plugin
#### css
* css-loader
* sass-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
## Notes
Now, when you import MyImage from '../img/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('../img/my-image.png') within your CSS. The loader will recognize this is a local file, and replace the '../img/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.
assets are automatically inlined or exported as a resource based on file size.
this default size is 8kb. - can configure see [docs](https://webpack.js.org/guides/asset-modules/).