一、什么是webpack的多進程打包

Webpack的多進程打包是通過利用多個子進程同時處理不同的模塊來加速打包過程的技術。這種技術可以提高打包效率，減少等待時間，使得項目構建更快。

使用多進程打包的好處在于，它可以將一些比較耗時的操作分配到不同的進程中進行并行處理，從而提高打包效率。這使得打包過程更加高效，節省了時間和資源。另外，和單進程打包相比，多進程打包也有助于避免進程卡死或異常終止的問題。

對于大型項目或需要進行復雜操作的項目，采用多進程打包可以更快地完成項目構建，提高效率，減少等待時間，使開發人員可以更快地檢驗代碼。

但是對于小型項目，比如我這個學習的demo其實使用多進程打包反而會比單進程慢，應為沒多開啟一個進程都要耗費一定時間和性能

二，為js和eslint配置多進程

我們啟動進程的數量就是我們 CPU 的核數。
1. 獲取 CPU 的核數，因為每個電腦都不一樣。

// nodejs核心模塊，直接使用
const os = require("os");
// cpu核數
const threads = os.cpus().length;

2. 下載包

npm i thread-loader -D

3. 核心配置

const os = require('os')
const threads = os.cpus().length
const path = require('path')
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
	entry: './src/main.js', 
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: 'static/js/main.js'
	},
	module: {
		rules: [
			{
            test: /\.m?js$/, // 轉譯哪些文件
            exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉譯
            use: [
              {
                loader: "thread-loader", // 開啟多進程
                options: {
                  workers: threads, // 數量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  // presets: ['@babel/preset-env'] // 添加預設，轉譯js文件
                  cacheDirectory: true, // 開啟babel編譯緩存
                  cacheCompression: false, // 緩存文件不要壓縮
                },
              },
            ],
          },
		]
	},
	plugins: [
      new ESLintWebpackPlugin({
        // 指定檢查文件的根目錄
        context: path.resolve(__dirname, "../src"),
        exclude: "node_modules", // 默認值
        cache: true, // 開啟緩存
        // 緩存目錄
        cacheLocation: path.resolve(
          __dirname,
          "../node_modules/.cache/.eslintcache"
        ),
        threads, // 開啟多進程
      }),
   ],
    optimization: {
  	  minimize: true,
  	  minimizer: [
  	    // css壓縮也可以寫到optimization.minimizer里面，效果一樣的
   	   new CssMinimizerPlugin(),
   	   // 當生產模式會默認開啟TerserPlugin，但是我們需要進行其他配置，就要重新寫了
   	   new TerserPlugin({
     	   parallel: threads // 開啟多進程
    	  })
   	 ],
  },
}

4. 完整代碼

• webpack.prod.js

// Node.js的核心模塊，專門用來處理文件路徑
const path = require("path");
// nodejs核心模塊，直接使用
const os = require("os");
const threads = os.cpus().length;
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入 mini-css-extract-plugin 插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // 壓縮css
const TerserPlugin = require("terser-webpack-plugin");

// 獲取處理樣式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解決大多數樣式兼容性問題
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  // 入口
  // 相對路徑和絕對路徑都行
  entry: "./src/main.js",
  // 輸出
  output: {
    // path: 文件輸出目錄，必須是絕對路徑
    // path.resolve()方法返回一個絕對路徑
    // __dirname 當前文件的文件夾絕對路徑
    path: path.resolve(__dirname, "../dist"),
    // filename: js文件輸出文件名
    filename: "js/main.js",
    clean: true, // 自動將上次打包目錄資源清空
  },
  // 加載器
  module: {
    rules: [
      {
        oneOf: [
          {
            // 用來匹配 .css 結尾的文件
            test: /\.css$/,
            // use 數組里面 Loader 執行順序是從右到左
            use: getStyleLoaders(),
          },
          {
            // 用來匹配.less結尾的文件
            test: /\.less$/,
            use: getStyleLoaders("less-loader"),
          },
          {
            test: /\.s[ac]ss$/,
            use: getStyleLoaders("sass-loader"),
          },
          {
            // 用來匹配圖片文件
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
              },
            },
            generator: {
              // 將圖片文件輸出到 images 目錄中
              // 將圖片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件擴展名
              // [query]: 添加之前的query參數
              filename: "images/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?|map4|map3|avi)$/,
            type: "asset/resource", // 以文件資源的形式輸出
            generator: {
              filename: "media/[hash:8][ext][query]", // 輸出到media目錄中
            },
          },
          {
            test: /\.m?js$/, // 轉譯哪些文件
            exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉譯        
            use: [
              {
                loader: "thread-loader", // 開啟多進程
                options: {
                  workers: threads, // 數量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  // presets: ['@babel/preset-env'] // 添加預設，轉譯js文件
                  cacheDirectory: true, // 開啟babel編譯緩存
                  cacheCompression: false, // 緩存文件不要壓縮
                },
              },
            ],
          },
        ],
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "../src"),
      cache: true, // 開啟緩存
      // 緩存目錄
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 開啟多進程
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創建文件
      // 新的html文件有兩個特點：1. 內容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成單獨文件
    new MiniCssExtractPlugin({
      // 定義輸出文件名和目錄
      filename: "css/main.css",
    }),
    // css壓縮
    // new CssMinimizerPlugin(),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // css壓縮也可以寫到optimization.minimizer里面，效果一樣的
      new CssMinimizerPlugin(),
      // 當生產模式會默認開啟TerserPlugin，但是我們需要進行其他配置，就要重新寫了
      new TerserPlugin({
        parallel: threads // 開啟多進程
      })
    ],
  },
  // 模式
  mode: "production", // 生產模式
  devtool: "source-map", // 生產環境下使用
};