一、什么是webpack的多進(jìn)程打包

Webpack的多進(jìn)程打包是通過(guò)利用多個(gè)子進(jìn)程同時(shí)處理不同的模塊來(lái)加速打包過(guò)程的技術(shù)。這種技術(shù)可以提高打包效率，減少等待時(shí)間，使得項(xiàng)目構(gòu)建更快。

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

對(duì)于大型項(xiàng)目或需要進(jìn)行復(fù)雜操作的項(xiàng)目，采用多進(jìn)程打包可以更快地完成項(xiàng)目構(gòu)建，提高效率，減少等待時(shí)間，使開(kāi)發(fā)人員可以更快地檢驗(yàn)代碼。

但是對(duì)于小型項(xiàng)目，比如我這個(gè)學(xué)習(xí)的demo其實(shí)使用多進(jìn)程打包反而會(huì)比單進(jìn)程慢，應(yīng)為沒(méi)多開(kāi)啟一個(gè)進(jìn)程都要耗費(fèi)一定時(shí)間和性能

二，為js和eslint配置多進(jìn)程

我們啟動(dòng)進(jìn)程的數(shù)量就是我們 CPU 的核數(shù)。
1. 獲取 CPU 的核數(shù)，因?yàn)槊總€(gè)電腦都不一樣。

// nodejs核心模塊，直接使用
const os = require("os");
// cpu核數(shù)
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$/, // 轉(zhuǎn)譯哪些文件
            exclude: /(node_modules|bower_components)/, // 排除哪些文件夾中的js文件不用轉(zhuǎn)譯
            use: [
              {
                loader: "thread-loader", // 開(kāi)啟多進(jìn)程
                options: {
                  workers: threads, // 數(shù)量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  // presets: ['@babel/preset-env'] // 添加預(yù)設(shè)，轉(zhuǎn)譯js文件
                  cacheDirectory: true, // 開(kāi)啟babel編譯緩存
                  cacheCompression: false, // 緩存文件不要壓縮
                },
              },
            ],
          },
		]
	},
	plugins: [
      new ESLintWebpackPlugin({
        // 指定檢查文件的根目錄
        context: path.resolve(__dirname, "../src"),
        exclude: "node_modules", // 默認(rèn)值
        cache: true, // 開(kāi)啟緩存
        // 緩存目錄
        cacheLocation: path.resolve(
          __dirname,
          "../node_modules/.cache/.eslintcache"
        ),
        threads, // 開(kāi)啟多進(jìn)程
      }),
   ],
    optimization: {
  	  minimize: true,
  	  minimizer: [
  	    // css壓縮也可以寫(xiě)到optimization.minimizer里面，效果一樣的
   	   new CssMinimizerPlugin(),
   	   // 當(dāng)生產(chǎn)模式會(huì)默認(rèn)開(kāi)啟TerserPlugin，但是我們需要進(jìn)行其他配置，就要重新寫(xiě)了
   	   new TerserPlugin({
     	   parallel: threads // 開(kāi)啟多進(jìn)程
    	  })
   	 ],
  },
}

4. 完整代碼

• webpack.prod.js

// Node.js的核心模塊，專(zhuān)門(mén)用來(lái)處理文件路徑
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", // 能解決大多數(shù)樣式兼容性問(wèn)題
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

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