webpack-configs/static-html/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
• 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
• 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 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.

Environment variables

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

stylelint - could only get it to read .stylelintrc after installing coc-stylelintplus (adds extra features to coc-ctylelint)

eslint - used airbnb base one - note need to install peer dependencies of that manually - what are peer dependencies and why are they only installed manually?