Webpack 知识点简介 Webpack 是一个资源打包工具，能够把HTML、CSS、JS、图片等资源经过一系列处理打

简介

Webpack 是一个资源打包工具，能够把HTML、CSS、JS、图片等资源经过一系列处理打包成静态资源文件。

为什么需要webpack

前端项目中可能会存在大量的引入，会导致命名冲突、页面体积变大。Node.js 出现之后，JS 项目支持通过 require 进行模块化导入，并且支持通过 npm 管理依赖。借助 Node.js 和浏览器 JS 的一致性，前端项目开始在 Node.js 上开发，然后转换成浏览器可执行的形式。

Webpack 支持 import、export 语法，只要有对应的 loader，任何资源都可被导入。

基本概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

流程概括

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

输出文件分析

Webpack 打包后生成一个 bundle.js 文件，其中有一个关键的 __webpack_require__ 函数。

bundle.js 能直接运行在浏览器中的原因在于输出的文件中通过 __webpack_require__ 函数定义了一个可以在浏览器中执行的加载函数来模拟 Node.js 中的 require 语句。

原来一个个独立的模块文件被合并到了一个单独的 bundle.js 的原因在于浏览器不能像 Node.js 那样快速地去本地加载一个个模块文件，而必须通过网络请求去加载还未得到的文件。如果模块数量很多，加载时间会很长，因此把所有模块都存放在了数组中，执行一次网络加载。

如果仔细分析 __webpack_require__ 函数的实现，还会发现 Webpack 做了缓存优化：执行加载过的模块不会再执行第二次，执行结果会缓存在内存中，当某个模块第二次被访问时会直接去内存中读取被缓存的返回值。

一个 `webpack.config.js` 样例

const path = require('path');
// 自动生成index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 压缩js文件
const TerserPlugin = require('terser-webpack-plugin');
// 打包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // 模式
  mode: 'development',
  devtool: 'inline-source-map',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 文件名，[name]表示入口文件js名，[contenthash]表示文件内容的hash值
    filename: "[name].[contenthash].js"
  },
  // 优化选项
  optimization: {
    // 压缩js文件
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  // 开发服务器
  devServer: {
    static: './dist',
  },
  // 解析
  resolve: {
    // 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 插件（plugin）
  plugins: [
    // 自动生成index.html文件
    new HtmlWebpackPlugin({
      title: 'Pigeoner',
    }),
    // 打包分析
    new BundleAnalyzerPlugin()
  ],
  // 模块（loader）
  module: {
    rules: [
      // 处理css文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理图片文件
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource'
      },
      // 处理js文件，使用babel-loader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

其他知识点

bundle、chunk、module 的定义

bundle 是 Webpack 打包出来的文件；chunk 是一个代码块，一个 chunk 包含多个 module；module 是开发中的单个模块，在 Webpack 中一切都是模块，一个模块对应一个文件，Webpack 会从配置的入口（entry）中递归开始查找所有模块。

Webpack 的基本功能

压缩代码
利用CDN加速：在构建过程中，将引用的静态资源路径修改为 CDN 上对应的路径。可以利用 webpack 对于output参数和各 loader 的publicPath参数来修改资源路径。
删除死代码（Tree Shaking）：将代码中永远不会走到的片段删除掉。可以通过在启动 webpack 时追加参数--optimize-minimize来实现。tree-shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术打包，在打包过程中检测工程中没有引用过的模块并进行标记，删除没有引用过的模块，提高构建速度，减少程序运行时间。
提取公共代码
代码分割：splitChunks - 在 optimization 配置项中配置，可以将 node__mudules 中代码单独打包成一个chunk 输出（比如使用了jquery？）；会自动分析多入口 chunk 中，有没有公共的文件，如果有会打包成单独的一个 chunk 不会重复打包。
Dll 进行分包：正常情况下 node_module 会被打包成一个文件。dll 技术，对可以将那些不常更新的框架和库进行单独打包，生成一个 chunk。
路由懒加载。在代码中所有被 import() 函数引用的模块，都将打成一个单独的包，放在 chunk 存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。

Webpack 与 Vite 的区别

开发模式的差异：Webpack 启动时会将所有模块打包成一个 bundle，增加了启动时间；Vite 是基于浏览器对 ESM（ES Modules）的支持，直接启动再按需编译依赖文件，启动较快
配置的差异：Webpack 配置复杂，但是能够应对大型项目的各种需求；Vite 主张低配置，适合中小型项目
社区生态的差异：Webpack 社区生态活跃，插件种类丰富；Vite 社区生态仍在发展
热更新机制的差异：Webpack 的热更新需要重新打包整个 bundle；Vite 的热更新只需要针对改动的模块进行更新，并重新请求即可
底层语言的差异：Webpack 基于 Node.js 进行构建，毫秒级别；Vite 基于 esbuild 进行依赖构建，esbuild 使用 Go 编写，纳秒级别

Webpack 知识点

简介