webpack构建流程、基础配置、打包性能优化、热更新、和Vite区别

一、webpack构建流程

四个阶段：

初始化阶段：读取配置文件、创建complier实例
编译阶段：解析入口点、模块加载（loader）
打包阶段：模块合并与优化、代码分割
输出阶段：生成输出文件

1.配置文件解析：

Webpack读取并解析webpack.config.js文件，获取构建所需的配置信息。

2.入口处理：

Webpack从入口文件开始，构建模块依赖图。

3.模块加载与转换：

使用加载器处理不同类型的模块，如CSS、图片等，将它们转换为JavaScript模块。

4.插件执行：

插件在特定的生命周期钩子上运行，执行诸如优化、资源管理等任务。

5.打包优化：

代码分割、Tree Shaking等优化手段被应用，以减少文件大小并提高性能。

6.生成输出文件：

打包后的文件根据配置输出到指定目录。

二、webpack基础配置

Webpack是一个强大的模块打包工具，它可以通过配置来实现代码压缩、代码分割、模块热替换等多种功能。以下是一些Webpack的常用配置项：

1. entry

• 作用：指定Webpack的入口文件。

• 示例：

  entry: './src/index.js',
  

2. output

• 作用：定义输出文件的配置，包括输出文件的名称、路径等。

• 示例：

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  

3. mode

• 作用：设置Webpack的运行模式，可以是development（开发模式）或production（生产模式）。

• 示例：

  mode: 'production',
  

• development模式：提供开发时的必要功能，如source map、错误提示等。

4. module

• 作用：配置模块的加载器和转换规则，用于处理不同类型的文件。

• module.rules：配置各类文件的处理规则，test属性用户匹配文件路径，use属性指定使用的loader；

• 示例：

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  

5. resolve

• 作用：配置模块解析规则，可以设置别名、扩展名等，方便引入模块。

• 示例：

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.json'],
  },
  

6. plugins

• 作用：使用插件来增强Webpack功能，例如压缩代码、拷贝文件等。

• 示例：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  

7.devServer

Webpack DevServer 是一个开发工具，它可以提供一个简单的 web 服务器，并且能够实时重新加载
contentBase：告诉服务器从哪里提供内容，默认情况下，服务器会使用当前执行目录。
compress：告诉服务器启用 gzip 压缩。
port：指定要监听请求的端口号。
open：告诉服务器自动打开浏览器。
hot：启用模块热替换(Hot Module Replacement)。

8. optimization：代码分割、压缩

• 作用：控制构建过程中的优化行为，如代码分割、压缩等。

• 示例：

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimize: true,
  },
  

  在 Webpack 中，optimization 配置用于控制构建过程中的优化行为。它可以帮助你实现代码分割、代码压缩、树摇（tree shaking）等功能，从而减小输出文件的大小和提高应用程序的性能。

  以下是一些常用的 optimization 配置选项：

  1. splitChunks
splitChunks 用于将公共代码（如第三方库、公共组件等）提取到单独的文件中，以实现代码分割和缓存复用。

  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的代码进行分割
      minSize: 20000, // 生成 chunk 的最小体积（以字节为单位）
      maxSize: 0, // 生成 chunk 的最大体积（以字节为单位），0 表示不限制
      minChunks: 1, // 模块被引用的最小次数
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 文件名的连接符
      name: true, // 是否根据模块和缓存组的名称自动生成文件名
      cacheGroups: {
        // 定义缓存组，用于控制代码分割的规则
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 优先级，值越大优先级越高
          filename: 'vendors.[contenthash].js', // 输出文件名
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则将复用它，而不是生成新的模块
          filename: 'common.[contenthash].js', // 输出文件名
        },
      },
    },
  },
  

  2. runtimeChunk
runtimeChunk 用于将 Webpack 的运行时代码提取到一个单独的文件中，以实现运行时代码的复用。

  optimization: {
    runtimeChunk: 'single', // 将运行时代码提取到一个单独的文件中
  },
  

  3. minimize
minimize 用于控制是否压缩输出文件。当设置为 true 时，Webpack 会使用默认的压缩插件（如 TerserPlugin）来压缩 JavaScript 代码。

  optimization: {
    minimize: true, // 启用压缩
  },
  

  4. minimizer
minimizer 用于自定义压缩插件。你可以在这里添加自定义的压缩插件，如 TerserPlugin（用于压缩 JavaScript 代码）、CssMinimizerPlugin（用于压缩 CSS 代码）等。

  const TerserPlugin = require('terser-webpack-plugin');
  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        // TerserPlugin 的配置选项
      }),
      new CssMinimizerPlugin({
        // CssMinimizerPlugin 的配置选项
      }),
    ],
  },
  

  5. moduleIds 和 chunkIds
moduleIds 和 chunkIds 用于控制模块和 chunk 的 ID 生成方式。这可以帮助你优化输出文件的大小和提高构建速度。

  optimization: {
    moduleIds: 'hashed', // 使用模块内容的哈希值作为模块 ID
    chunkIds: 'named', // 使用模块名称作为 chunk ID
  },
  

  通过合理地配置 optimization 选项，你可以优化 Webpack 的构建过程，提高应用程序的性能。

通过合理地配置这些选项，你可以优化Webpack的构建过程，提高应用程序的性能和可维护性。

三、loader和plugin

loader

loader：用于转换模块的工具。主要用于文件内容的转换。

• babel-loader处理js文件，将es6+代码转换为es5，通常与@babel/preset-env一起使用；

• css-loader和saas-loader处理css和sass文件，miniCssExtractPlugin.loader将css提取为单独文件；

• style-loader将css插入到dom的