Webpack 5 Series Part-1

Please look for the other parts of the series to fully understand the concept.
Webpack 5 series part-2
Webpack 5 series part-3
Webpack 5 series part-4

What is Webpack?

It takes the various modules and dependencies that your application uses (like JavaScript files, CSS files, etc.) and bundles them into static files (or bundles) that are optimized for browsers

There are some important key configurations in Webpack.

1. Entry:
The starting point of your application is where Webpack begins the bundling process.

2. Output:
This property specifies where the bundled files should be saved

3. Loaders:
Loaders are the most important part in Webpack. Loaders allow Webpack to process files that are not JavaScript, like CSS or images. For example, the css-loader processes CSS files, and the babel-loader transpiles modern JavaScript syntax (Jsx or Tsx) to make it compatible with older browsers. you need to install all required loaders from npm

4. Plugins:
As time pass by webpack needs more powers to handle modern scenarios
in web application. there are hundreds of plugin available in webpack .Plugins add more power to Webpack and allow it to do things beyond just bundling.

5. Resolve:
if you set resolve property , you need not to provide file extension while importing the file in other module.

6. Mode:
Mode defines , are we using Webpack in 'development' environment or 'production' environment? people usually create environment-specific webpack configuration files such as webpack.dev.js or webpack.prod.js

7. Code Splitting:
Webpack can split your code into multiple bundles, especially for larger applications. This allows for optimized loading, where only the necessary chunks are loaded as needed (e.g., dynamic imports).

8. Module & rules:
At the end define all the rules to handle different file types.

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  mode : 'production',
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff(2)?|e01|ttf|otf|svg)$/,
        type: "asset/inline",
      },
    ],
  },
  plugins: [
    //inject bundle.js file into index.html file
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html"),
    }),
  ],
};