My custom react project setup with Webpack
Three webpack config files:
-common config
-development mode config
-production mode config
-JSX babel loader
-SCSS/CSS/Styles loader
-HTML loader
-HtmlWebPackPlugin for creating .html by template and minifying created .html (/dist/index.html)
-MiniCssExtractPlugin for creating separate .css file in production mode
-OptimizeCssAssetsPlugin for minifying .css files
-TerserPlugin for minifying .js files
-CleanWebpackPlugin for clearing /dist folder on every production build
ToDo:
Image loaders
Image Minifiers
Url loaders (transforms img url to base64 - https://webpack.js.org/loaders/url-loader/)
Font Loaders
Loading data (.json, .csv...)
Explore more about performance, caching, tree shaking...