Webpack 有哪些常见配置？

Webpack 的配置文件（通常为 webpack.config.js）中包含多种常见配置项，以下是一些主要的配置选项：

1. Entry

• 入口：定义应用的入口点，可以是单个文件或多个文件。

  entry: './src/index.js',
  

2. Output

• 输出：配置打包后文件的输出位置和文件名。

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

3. Loaders

• 文件处理：使用 loaders 处理非 JavaScript 文件（如 CSS、图片、字体等）。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  

4. Plugins

• 插件：用于扩展 Webpack 的功能，执行各种任务（如压缩、优化等）。

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new CleanWebpackPlugin(),
  ],
  

5. Mode

• 模式：指定构建模式（development 或 production），影响默认的优化设置。

  mode: 'development', // or 'production'
  

6. DevServer

• 开发服务器：配置 Webpack Dev Server，用于本地开发时的实时刷新和热模块替换。

  devServer: {
    contentBase: './dist',
    hot: true,
  },
  

7. Resolve

• 模块解析：配置模块解析的选项，包括别名和文件扩展名。

  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  

8. Optimization

• 优化设置：配置打包优化选项，如代码分割和压缩。

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimize: true,
  },
  

9. Devtool

• 源映射：配置调试源映射，帮助开发者调试代码。

  devtool: 'source-map',
  

10. Performance

• 性能提示：配置性能提示，帮助识别打包后的文件大小。

  performance: {
    hints: 'warning',
    maxAssetSize: 100000, // 100kb
  },