webpack5常用配置

该常用配置使用的npm包：

"dependencies": {
    "autoprefixer": "^10.4.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^6.2.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
"devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "compression-webpack-plugin": "^9.2.0",
    "cross-env": "^7.0.3",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.6.0",
    "progress-bar-webpack-plugin": "^2.1.0",
    "style-loader": "^3.3.1",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-dev-server": "^4.7.4"
  }

webpack.config.js 实例：

const path = require('path')
// 生成一个HTML5文件，在body中使用script标签引入你所有webpack生成的bundle
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 优化和压缩CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 开启gzip压缩
const CompressionPlugin = require("compression-webpack-plugin");
// 增加编译进度条
const chalk = require('chalk')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
// 将bundle内容展示为一个便捷的、交互式、可缩放的树状图形式
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

console.log('process.env.NODE_ENV=', process.env.NODE_ENV) // 打印环境变量

const config = {
  // 配置入口
  entry: './src/index.js', 
  // 配置出口
  output: {
    filename: "[name].[contenthash:8].js", // 输出文件名
    path: path.join(__dirname, 'dist'), // 输出文件目录
    clean: true //每次构建清除dist包
  },
  // server配置
  devServer: {
    hot: true, //热更新
    open: true, //编译完自动打开浏览器
    compress: true, //开启gzip压缩
    port: 8080, //开启端口号
    //托管的静态资源文件
    //可通过数组的方式托管多个静态资源文件
    static: {
      directory: path.join(__dirname, "../public"),
    },
  },
  // loader都在module下的rules中配置
  // tip：use链式调用，都是从右向左解析，需注意调用loader的顺序。
  module: {
    rules: [
      // css转换规则
      {
        test: /\.css$/, //匹配所有的 css 文件
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: { postcssOptions: { plugins: ['autoprefixer'] } }
          }
        ] // use: 对应的 Loader 名称
      },
      // webpack5内置了资源模块（asset module），代替了file-loader和url-loader
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'static/img/[name].[hash:7][ext]'
        }
      },
      // ES6，JSX转换规则
      {
        test: /(\.jsx|\.js)$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  },
  // 配置插件
  plugins: [
    new HtmlWebpackPlugin({
      // 静态html路径
      template: './public/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css'
    }),
    new ProgressBarPlugin({
      format: `:msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
    }),
    // new BundleAnalyzerPlugin(),
    new CompressionPlugin()
  ],
  // 配置别名
  resolve: {
    extensions: [".js", ".jsx", ".json", ".vue"], //省略文件后缀
    alias: { //配置别名
      "@": path.resolve(__dirname, "../src"),
    },
  },
  optimization: {
    // 拆分chunk
    splitChunks: {
      chunks: "all",
      name: "vendor",
      cacheGroups: {
        lodash: {
          name: "lodash",
          chunks: "async",
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          priority: 40,
        },
        "async-common": {
          chunks: "async",
          minChunks: 2,
          name: "async-commons",
          priority: 30,
        },
        commons: {
          name: "commons",
          chunks: "all",
          minChunks: 2,
          priority: 20,
        },
      },
    },
  },
}
module.exports = (env, argv) => {
  console.log('argv.mode=', argv.mode) // 打印 mode(模式) 值
  // 这里可以通过不同的模式修改 config 配置
  return config
}

根目录的.babelrc文件 实例：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

package.json 新增serve和build：

 "scripts": {
    "serve": "cross-env NODE_ENV=dev webpack serve --mode development",
    "build": "cross-env NODE_ENV=prod webpack --mode production",
  }

package.json 新增browserslist配置:

browserslist与scripts同级

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

nginx配置gzip压缩

nginx配置gzip压缩，静态资源会被自动压缩。不需要所谓的插件，vite-plugin-compression compression-webpack-plugin

#Gzip module
    gzip  on;
    gzip_disable "MSIE [1-6].";
    gzip_min_length 1k;
    gzip_http_version 1.1;
    gzip_types text/css text/xml application/javascript;