**Course Title:** Build and Package Management in Modern Development **Section Title:** Building with Webpack **Topic:** Configuring Webpack: Entry, Output, Loaders, and Plugins **Introduction** In the previous topic, we introduced module bundling and the role of Webpack in modern development. Now, we'll dive deeper into configuring Webpack to optimize our build process. Webpack's configuration file is where we define how our code is processed and transformed into a production-ready bundle. In this topic, we'll explore the fundamental concepts of Webpack configuration, including entry points, output options, loaders, and plugins. **Understanding Webpack Configuration** Webpack's configuration file is typically named `webpack.config.js`. This file exports a JavaScript object that contains various options and settings that control how Webpack processes our code. **Entry Points** An entry point is the file that Webpack starts with when building our application. We can define multiple entry points, which can be useful for creating separate bundles for different parts of our application. ```javascript module.exports = { entry: './src/index.js', }; ``` In this example, Webpack starts with the `index.js` file in the `src` directory. **Multiple Entry Points** To define multiple entry points, we can pass an object with multiple key-value pairs: ```javascript module.exports = { entry: { main: './src/main.js', admin: './src/admin.js', }, }; ``` In this case, Webpack creates two separate bundles: `main.bundle.js` and `admin.bundle.js`. **Output Options** The output option specifies where Webpack writes its output files. We can configure the output directory, filename, and chunk filenames. ```javascript module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, }; ``` In this example, Webpack writes its output files to the `dist` directory, and names the final bundle `bundle.js`. **Loaders** Loaders are functions that process files and convert them into a format that can be consumed by Webpack. There are many types of loaders available, including: * `babel-loader`: transpiles ES6+ code to ES5 * `css-loader`: loads CSS files * `file-loader`: loads files as-is * `raw-loader`: loads files as a string To use a loader, we need to install it and then configure it in our Webpack configuration file. ```javascript module.exports = { module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, }; ``` In this example, we're using the `babel-loader` to transpile JavaScript files, and the `css-loader` and `style-loader` to load CSS files. **Plugins** Plugins are extensions to Webpack that provide additional functionality. Some popular plugins include: * `html-webpack-plugin`: generates an HTML file for our application * `clean-webpack-plugin`: cleans the output directory before each build * `uglifyjs-webpack-plugin`: minifies our code To use a plugin, we need to install it and then require it in our Webpack configuration file. ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [new HtmlWebpackPlugin()], }; ``` In this example, we're using the `html-webpack-plugin` to generate an HTML file for our application. **Conclusion** In this topic, we covered the fundamental concepts of Webpack configuration, including entry points, output options, loaders, and plugins. By mastering these concepts, we can create efficient and optimized builds for our modern web applications. **Practice** * Create a new Webpack project and configure it with multiple entry points. * Experiment with different loaders, such as `css-loader` and `file-loader`. * Use plugins, such as `html-webpack-plugin` and `clean-webpack-plugin`, to extend Webpack's functionality. **What's Next?** In the next topic, we'll explore the Webpack development workflow, including development mode, watch mode, and build optimization. **Leave a Comment/Ask for Help** If you have any questions or need help with Webpack configuration, feel free to leave a comment below. We'll do our best to assist you. **External Resources** * Webpack Documentation: <https://webpack.js.org/configuration/> * Webpack Loaders: <https://webpack.js.org/loaders/> * Webpack Plugins: <https://webpack.js.org/plugins/>

module.exports = {
  entry: './src/index.js',
};

module.exports = {
  entry: {
    main: './src/main.js',
    admin: './src/admin.js',
  },
};

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
};