Full Guide: Webpack loaders and Optimization

This will be the full guide to help you start your React App from scratch with the followings:

• Webpack 5 (Bundle your app)
• Babel (Transpile JSX)
• TypeScript
• Eslint (Format Code like a pro)
• Husky (Lint Before Commit)
• Jest (Testing Library)
• Micro Front-end (Webpack 5 Module Federation)

Previous Course

1. Start React App From Scratch

Full Guide: Start React App From Scratch

Loaders

• sass-loader — for sass and scss files
• css-loader — for css modules
• asset — including images but exclude svg
• svg — special handling that allow svg is used as component

npm i --save-dev @svgr/webpack sass-loader css-loader mini-css-extract-plugin file-loader less-loader

**You may not need all of these, just pick the packages that you will use

Optimization

Here we will go deeper in webpack config, and optimize it for production. Here are the plugins that will be used for optimization

• fork-ts-checker-webpack-plugin — run TypeScript checker will webpack is bundling
• terser-webpack-plugin — compressor
• css-minimizer-webpack-plugin — using cssnano to optimize and minify css files
• copy-webpack-plugin — copy files from source folder to dist folder
• mini-css-extract-plugin — extractst css into separate files (styles will not included in js files)
• DefinePlugin — use this to define global variables, mostly define process.env arross the modules

you can update your webpack.config.ts as follow

Please give me a clap, and follow me if you find the article is useful.