Webpack Demo

Optimal Webpack 5 Setup based on the Official Guide!

Optimizations

  • CleanWebpackPlugin to clean dist folder before every build
  • HtmlWebpackPlugin to generate index.html
  • WebpackDevServer for live build updating in development
  • splitChunks for code splitting
  • CSS and Sass loader for parsing CSS or Scss
  • Webpack asset/resource for loading images and fonts
  • MiniCssExtractPlugin for splitting CSS or Scss and minifying
  • contenthash and deterministic moduleIds used for browser caching
  • source-maps used to find the source of errors
  • BundleAnalyzerPlugin used to create a bundle analysis

Technologies Used

  • Webpack 5
  • Webpack Dev Server
  • Webpack Bundle Analyzer