当前位置：首页 > news >正文

webpack 学习

news 来源：原创 2025/5/18 6:40:50

webpack打包流程及原理

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。在 Web 开发中，它主要用于将各种资源（如 JavaScript、CSS、图片等）打包成浏览器可以直接运行的文件。Webpack 的核心概念和原理主要包括模块化、加载器（Loaders）、插件（Plugins）和打包过程。

webpack作用
把静态模块内容，压缩、转译、打包等（前端工程化）

1. 模块化

Webpack 支持多种类型的模块化标准，包括 CommonJS、AMD 和 ES6 模块等。这意味着你可以使用任何一种标准的模块化语法来组织你的代码。
一文搞懂 JavaScript 模块化规范：CommonJS、AMD、ES6 Module

ES6 Module 标准，这一标准通过静态分析、异步加载和浏览器原生支持，解决了 CommonJS 规范中的许多问题，为开发者提供了更强大和灵活的模块化支持。
ES6 Module 在编译时就可以确定模块的依赖关系，从而实现静态分析和树摇（Tree Shaking）优化。这意味着模块中没有被使用的代码可以在打包阶段被移除，从而减小最终的文件大小。
import 和 export 关键字来导入和导出模块成员。导出可以是命名导出（Named Export）或默认导出（Default Export）。

export default 用于导出模块的默认值。在一个模块中，只能有一个默认导出。其他文件中通过 import 语句以任意名称导入。
export 用于命名导出。在一个模块中可以有多个命名导出。其他文件中通过具体的名称来导入。
— 可同时存在
动态导入（Dynamic Import）：需要按需加载的场景

CommonJS：适用于 Node.js 服务端开发，使用同步加载机制。
AMD：适用于浏览器环境，使用异步加载机制，解决了前端模块依赖问题。：较复杂的定义方式
ES6 Module：现代浏览器和 JavaScript 语言级别的模块化标准，支持静态分析、异步加载和 Tree Shaking，是当前前端开发的主流选择。

2. 加载器（Loaders）

加载器（Loaders）允许 Webpack 处理非 JavaScript 文件（例如 CSS、图片或字体文件）。通过配置不同的加载器，你可以让 Webpack 将这些文件转换为有效的模块，并一起打包。例如，css-loader 用于将 CSS 文件转换为 JavaScript 模块，file-loader 用于处理文件资源。

3. 插件（Plugins）

插件（Plugins）用于执行范围更广、更复杂的任务，如打包优化、资源管理和环境变量注入等。例如，HtmlWebpackPlugin 可以帮助你生成 HTML 文件，并将打包后的资源自动注入到这个 HTML 中。

4. 打包过程

Webpack 的打包过程大致可以分为以下几个步骤：

a. 入口（Entry）
Webpack 通过一个或多个入口点开始构建依赖图。入口可以是一个文件或多个文件。

module.exports = {entry: './src/index.js'
};

b. 模块（Modules）
Webpack 会从配置的入口点开始，递归地构建出所有依赖的模块。它会分析模块间的依赖关系，形成一个依赖图（dependency graph）。

c. 加载器（Loaders）
对于每个模块，Webpack 会使用相应的加载器来转换文件。例如，如果模块是 CSS 文件，css-loader 会将 CSS 文件转换为 JavaScript 模块。

module.exports = {module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]}
};

d. 插件（Plugins）
在生成资源后，Webpack 会执行配置的插件。插件可以对资源进行额外的处理，例如压缩、优化或环境变量的注入。

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};

e. 输出（Output）
最后，Webpack 会输出打包后的文件。这通常是一个或多个 JavaScript 文件，以及其他资源文件（如 CSS、图片等）。
module.exports = {
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
}
};

通过以上步骤，Webpack 能够有效地将各种资源打包成一个或多个浏览器可以直接运行的 JavaScript 文件。这种模块化和自动化的打包方式极大地提高了前端开发的效率和项目的可维护性。

‌Tree Shaking‌

是一种在JavaScript打包过程中优化代码的技术，旨在通过静态分析删除未使用的代码，从而减少输出文件体积，提高加载速度和执行效率。

基本概念和作用
Tree Shaking 本质上是一种“静态死代码删除”技术，其名字来源于“摇树”（shake tree）的比喻：将一棵树摇晃，未固定的叶子（无用代码）就会掉落。在 JavaScript 打包场景中，Tree Shaking 通过扫描和分析代码之间的依赖关系（尤其是使用 ES6 模块系统的静态 import/export 结构）来识别哪些模块或代码块没有被使用，然后在生成最终打包文件时将这些代码剔除‌

实现原理

Tree Shaking 的实现依赖于几个关键机制和条件：

1、‌‌代码解析‌与抽象语法树（AST）的构建：ES6 模块（使用 import 和 export）具有静态结构，编译器可以在编译期间确定模块之间的依赖关系‌

2、静态分析‌：
通过分析代码的导入导出关系，确定哪些导出值未被其他模块使用，并将其删除‌

在不同工具中的实现

Webpack‌：在 Webpack 中，启动 Tree Shaking 功能需要同时满足以下条件：使用 ESM 规范编写模块代码、配置 optimization.usedExports 为 true、设置 mode 为 production 并启用代码优化功能‌

‌Rollup‌：由 Rich Harris 率先实现，支持更细粒度的 Tree Shaking‌

实际应用案例

在 Vue3 中，Tree Shaking 特性通过将全局 API 进行分块，并通过 ES6 模块化的方式引入。如果不使用某些功能，它们将不会包含在基础包中。这样在编译时就能确定模块的依赖关系，让打包工具（如 Webpack 或 Rollup 等）可以对没有用到的 API 进行剔除，从而最小化打包体积‌

Tree Shaking对于require()语句来引入模块难以优化‌，主要原因在于ES6模块（import/export）和CommonJS模块（require/module.exports）在静态分析和动态导入方面的差异。

原因分析

‌静态分析与动态导入‌：

‌ES6模块‌：ES6模块的导入和导出是静态的，这意味着在编译时就可以确定哪些代码会被导入或导出。这使得打包工具（如Webpack）能够进行静态分析，识别出未使用的代码并将其移除‌

‌CommonJS模块‌：CommonJS模块的导入是通过动态执行require()函数实现的，这种动态导入方式使得打包工具无法在编译时确定哪些代码会被使用，因此无法进行有效的静态分析，从而难以实现Tree Shaking‌。

打包工具的支持‌：

‌Webpack‌：在Webpack 4及以上版本中，Tree Shaking是默认开启的，但仅支持ES6模块。对于CommonJS模块，Webpack无法进行静态分析，因此无法进行Tree Shaking‌

‌Rollup‌：Rollup本身对Tree Shaking的支持非常好，但同样仅支持ES6模块。如果项目中使用了CommonJS模块，需要进行转换或排除处理‌

解决方案

‌转换模块语法‌：将CommonJS模块转换为ES6模块。例如，将const moduleA = require(‘./moduleA’);转换为import moduleA from ‘./moduleA’;。这样可以确保打包工具能够进行静态分析，从而实现Tree Shaking‌、

‌配置打包工具‌：在Webpack配置文件中，确保mode设置为production，这样Tree Shaking会在生产模式下自动启用。同时，避免使用会阻止Tree Shaking的配置选项，如optimization.sideEffects应设置为false或正确配置‌

webpack4和webpack5，为什么要使用5而不用4？
webpack超详细教程，学webpack看这一篇就够了！（上）
webpack超详细教程，学webpack看这一篇就够了！（下）

开发模式注重代码热替换更快，让开发调试代码更便捷
生产模式注重项目体积更小，更轻量，适配不同的浏览器环境
注意：Webpack 默认入口和出口分别为：
src/index.js 和 dist/main.js

技术之间的建立基础：

webpack是建立在node.js的基础上
const 变量名 = require(‘模块名或路径’)
// Node.js 环境内置模块直接写模块名（例如：fs，path，http）

vue-cli 不同版本对应的 webpack版本及生成项目的目录
在使用 Vue CLI 创建项目时，Vue CLI 会自动配置好 Webpack 版本，以便开发者可以更加专注于开发而不必深入了解底层的构建工具。。

Vue CLI 版本与 Webpack 版本
自从 Vue CLI 3.x 版本开始，Vue CLI 使用了 Webpack 作为其默认的构建工具。但是，随着 Vue CLI 的更新，Webpack 的版本也可能发生变化。以下是 Vue CLI 版本与 Webpack 版本的大致对应关系：

Vue CLI 2.x

Webpack 版本：通常使用 Webpack 2 或 Webpack 3。
特点：Vue CLI 2.x 主要针对 Vue 2.x 项目。

Vue CLI 3.x

Webpack 版本：从 Vue CLI 3.0 开始，默认使用 Webpack 4。
特点：引入了 Vue CLI 的插件系统，支持更灵活的配置和扩展。

Vue CLI 4.x

Webpack 版本：继续使用 Webpack 4。
特点：进一步优化了项目结构和构建性能。

Vue CLI 5.x

Webpack 版本：理论上仍使用 Webpack 5（尽管 Vue CLI 5.x 目前仍在 beta 阶段，官方文档可能还未完全更新）。

特点：引入了 Vite 作为可选的构建工具，提供了更快的开发服务器启动和热重载。
生成的项目的目录结构
不论使用哪个版本的 Vue CLI，生成的项目的目录结构基本相同，

主要目录包括：

/node_modules: 存放 npm 包。
/public: 存放静态资源如 index.html 和 favicon.ico。
/src:
/assets: 存放图片、字体等静态资源。
/components: 存放 Vue 组件。
/views: （在某些配置中）存放视图文件。
App.vue: 项目的主组件。
main.js/main.ts: 项目入口文件。
/dist: （在生产环境下构建时生成）存放构建后的代码。
/config 或 vue.config.js: 项目配置文件，用于修改默认的 webpack 配置等。
package.json: 项目依赖和脚本配置文件。
.gitignore: Git 忽略文件配置。