Webpack 的配置文件 webpack.config.js 代码

下面是一个简单的示例 webpack.config.js 文件的代码：

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|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

这个配置文件包含了以下几个部分：

- `entry`: 入口文件，指定 webpack 应该从哪个文件开始构建依赖关系图。
- `output`: 输出文件，指定 webpack 应该将构建后的文件输出到哪个目录下。
- `module`: 模块规则，用于指定 webpack 如何处理不同类型的模块文件。
- `devServer`: 开发服务器配置，用于启动一个本地服务器进行开发调试。

在这个示例中，我们使用了 `babel-loader` 和 `css-loader` 分别处理了 JavaScript 和 CSS 文件，并使用了 `style-loader` 把 CSS 注入到 HTML 中。同时，我们还配置了一个简单的开发服务器，以便在本地进行开发测试。