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

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
• stylelint
• stylelint-webpack-plugin
• cssnano

other

• webpack-dev-server
• clean-webpack-plugin

live server

Installation notes

make repository private - edit package.json
replace "main": "index.js" with "private": "true"

Usage 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 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.