Entry -An entry point indicates which module webpack should use to begin building out its internal [default ./src/index.js]
Ouput - The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js
Loader - Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid
that can be consumed by your application and added to the dependency graph
The test property identifies which file or files should be transformed.
The use property indicates which loader should be used to do the transforming.
Plugins - plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables; require() it and add it to the plugins array
Mode - development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production
Browser Compatibility
esbuild
parcel
rollup
browserify
CRACO - Create React App Configuration Overide
CSS Pre-processors / Extensions
SASS
PostCSS - JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API for analyzing and modifying it using JavaScript plugins
, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using
, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.
Babel - JavaScript compiler; transpire your code from modern JavaScript to compatible JS
Tailwind - utility-first CSS framework for building websites; functional approach to web design by providing thousands of tiny classes to use directly in your HTML
