Webpack Configuration Setup Guide

Configuring webpack bundling is typically done by creating a webpack configuration file, commonly named webpack.config.js. In this configuration file, you can specify various options such as entry (input file), output (output file), module (module configuration), plugins (plugin configuration), and more. Here is a simple example of a webpack configuration file:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // 添加插件配置
  ]
};

In this configuration file, we set the entry file as src/index.js and the output file as dist/bundle.js. We use babel-loader to process js files, style-loader and css-loader to handle css files, and various plugins can be configured to extend webpack’s functionality. Once the configuration is complete, running the webpack command will package the files.