Webpack Learning

This project demonstrates the basics of using Webpack to bundle JavaScript and CSS assets for web applications.

Running Webpack

To run webpack with a specific configuration file, use:

webpack --config webpack.config.js

Note: If a webpack.config.js file is present in your project root, the webpack command will pick it up by default. The --config option is used here to show that you can specify a configuration file with any name. This is especially useful for complex setups that require multiple configuration files.

Handling CSS with Webpack

To include CSS in your webpack bundle, add the following rule to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

When multiple loaders are specified in the use property, webpack applies them from right to left. In this example, css-loader processes the CSS files first, and then style-loader injects the styles into the DOM.

What is a Bundle?

A bundle is a group of output files generated by webpack. These files contain your application's code and assets, optimized for the browser. Bundling helps improve load times and manage dependencies efficiently.

---

Feel free to explore and modify the configuration to suit your project's needs!