webpack 的常用配置有哪些详细例举

常用的webpack配置如下：

entry：webpack打包的入口文件，可以是一个字符串、数组或对象，具体使用可以参考官方文档。
output：配置webpack打包生成的输出文件的路径、文件名等。
module：配置webpack的模块加载器，可以在打包过程中对各类文件进行处理，如css、less、sass等。
plugins：使用webpack插件，可以实现各种功能，如压缩代码、提取公共代码、打包时生成一些额外的文件等。
resolve：配置webpack如何解析模块的路径和文件，可以设置别名、后缀名等。
devServer：配置webpack的开发服务器，可以实现热更新、代理等功能，方便开发调试。
optimization：用于配置webpack的优化策略，包括minimize、splitChunks、runtimeChunk等。
mode：用于设置webpack的模式，可以是development、production或none，默认是production模式。

一个常见的webpack配置文件例子如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css'
    })
  ],
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  devServer: {
    contentBase: './dist',
    port: 8080
  },
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: true
  },
  mode: 'production'
};

该配置文件中，使用了babel-loader进行ES6语法转换，使用了MiniCssExtractPlugin将CSS提取到单独的文件中，使用了HtmlWebpackPlugin生成HTML文件，使用了file-loader处理图片等静态资源，使用了devServer进行开发调试。