webpack6中js、css 常用优化配置项

// package.json
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "babel-loader": "^10.0.0",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.2",
    "mini-css-extract-plugin": "^2.9.2",
    "terser-webpack-plugin": "^5.3.14",
    "webpack": "^5.99.6",
    "webpack-cli": "^6.0.1"
  }

// webpack.config.js
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  mode: "production",
  output: {
    clean: true,
  },
  entry: ["./src/main.js", "./src/main.css"],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modulesbower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],

  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};