webpack 配置详解

Webpack 是一个现代化的前端项目构建工具，它主要用于打包和优化 Web 应用程序的资源。通过使用模块化加载器和插件，Webpack 可以将多个模块打包成一个或多个单独的 JavaScript 文件。

Webpack 的配置文件是一个 JavaScript 模块，它需要导出一个对象。在配置文件中，你可以指定入口文件、输出路径、模块解析规则、插件等等。

以下是一个简单的 Webpack 配置示例：

const path = require('path');

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

上述配置中，我们定义了入口文件为 `./src/index.js`，输出路径为 `dist/bundle.js`。我们还定义了两个模块解析规则，分别是使用 babel-loader 处理 JavaScript 文件和使用 style-loader 和 css-loader 处理 CSS 文件。最后，我们还添加了一个 Source Map 插件。

如果你想深入了解 Webpack 的配置，可以查看官方文档，或者参考其他开发者的博客或教程。