2.3 KiB
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
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
assets - jpgs, svgs, etc
loaded with webpack 5's asset modules. path to asset file is relative from the source file. assets are automatically inlined or exported as a resource based on file size. this default size is 8kb. - can configure see docs.
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 
in the same manner.
however, in the template files need to use:
<img src="<%=require('../img/my-img.jpg');%>">
javascript is the usual: