Webpack

• Loaders or Webpack loaders: When you see the name loader plugin like: style-loader, css-loader etc, you can assume that it's a plugin used with webpack
• style-loader: Injects styles into DOM. Do not create external css file when build. It is helpful in dev mode. For production, you should use 'MiniCssExtractPlugin'
• css-loader: Translates CSS into CommonJS
• sass-loader: Compiles Sass to CSS
• postcss-loader: A versatile tool for transforming and optimizing CSS. Versatile functions such as adding vendor prefixes, minification, converting modern CSS to older syntax and more.
• ts-loader Transpiles TypeScript code into JavaScript
• babel-loader: transform modern JavaScript code into an older syntax
• autoprefixer: Automatically adds vendor prefixes to your CSS

How webpack execute

1. When you execute the command npm run dev, it typically triggers a script defined in your package.json file under the "scripts" section.

       "scripts": {
         "dev": "webpack --mode development"
       }

2. When webpack runs, it looks for a configuration file by default named webpack.config.js in the root directory of your project. Here --mode is a flag
3. module.exports = {} and module.exports = () => {} are both ways of exporting something from a Node.js module
   • In first case, when another module imports this module using require, it will receive the object { key: 'value' }
   • In other case, the syntax exports a function. This function should return a object similar to the first case.
   Normally, you can export object, but to pass flags, you should export function.
4. module.exports and require are used respectively to export and import modules in Node.js environment.