109 lines
2.9 KiB
Markdown
109 lines
2.9 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
|
|
* 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.
|