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

NOT INCLUDED

• code splitting

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