webpack-构建流程

最新推荐文章于 2025-03-13 15:05:51 发布
原创 最新推荐文章于 2025-03-13 15:05:51 发布 · 1.1k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

构建流程

  1. 初始化配置
  2. 实例化一个 Compiler 类，注册所有的插件 plugin，给对应的 Webpack 的生命周期绑定 hooks
  3. 开始编译：执行 Compiler 类的 run 方法开始构建
  4. 实例化一个 Compilation 类，Compilation 是做构建打包的事情，主要做以下几件事：
    • 查找和分析入口 entry
    • 使用 loader 处理指定文件
    • 解析文件的 AST 语法树
    • 找出文件依赖关系（arcon）
    • 递归编译依赖的模块
  5. 递归完后得到每个文件的最终结果，根据 entry 生成代码块 chunk
  6. 输出

整体流程：init >> make >> seal

webpack 5 带来了什么

  • 持久化缓存。webpack4 需要通过 cache-loader/hardSourcePlugin 来实现中间缓存，webpack5 相当于内置了这部分功能
  • 更好的 hash 算法。hash—>fullhash，比如 webpack 4 如果添加空白、注释或修改变量名是会影响 contenthash 值的计算，webpack5 则不会影响，从而能继续使用缓存，这个方式降低了缓存的失效率，间接加快了应用 rebuild 的速度
  • Asset Modules（更优雅的资源模块）。指的是图片和字体等这一类型文件模块，它们无须使用额外的预处理插件
  • 模块联邦。实现应用级的模块复用，这个是现在蛮多新兴微前端框架的基础
  • tree-shaking 改进。据说可以减少约 30%
最低0.47元/天 解锁文章
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
当尝试构建生产环境时，遇到了错误。将`UglifyJsPlugin`注释掉后，打包过程能够顺利完成，但显然这不是理想的解决方案。 问题的根源在于某些外部库或依赖，比如animejs和vue-particles，它们包含了ES6语法，但是...
前端开源库-style-ext-html-webpack-plugin
08-30
5. **兼容性**：插件兼容HTMLWebpackPlugin的所有功能，可以无缝集成到现有Webpack构建流程中。 **四、优化策略** 1. **首屏优化**：将关键CSS内联，确保页面首次渲染时无白屏现象。 2. **懒加载**：对于非首屏...
Webpack 的构建流程
weixin_45573779的博客
08-06 3286
首先先简单了解下 Webpack 构建过程：根据配置，识别入口文件；逐层识别模块依赖（包括、AMD、或 ES6 的 import 等，都会被识别和分析）；Webpack 主要工作内容就是分析代码，转换代码，编译代码，最后输出代码；输出最后打包后的代码。
webpack工作流程
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-18 1748
entryLoader在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
Webpack构建流程
大兵的猫
01-03 2859
webpack构建流程
webpack的构建流程
Silvia
05-21 1万+
一、运行流程 webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好 从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 M.
Webpack的构建流程
weixin_43867229的博客
03-19 472
从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理。：对编译后的 Module 进行深度优化，如模块合并、拆分等，然后将这些信息写入到 Chunk 中，再把 Chunk 转换成文件，输出到文件系统中。这个过程中，Webpack 会广播出许多事件，插件可以监听这些事件，在适当的时机添加自己的逻辑。：启动构建，读取和合并配置参数，加载 Plugin，实例化 Compiler。
purgecss-webpack-plugin：用于Webpack的Purgecss插件
02-04
而`purgecss-webpack-plugin`则是将Purgecss集成到Webpack构建流程中的插件，帮助开发者实现自动化删除未引用的CSS规则。 **1. 安装与配置** 首先，你需要在项目中安装`purgecss-webpack-plugin`。这可以通过npm...
webpack-develop.zip
11-01
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。Vue CLI（命令行接口）是官方提供的脚手架...在实际开发中，可以根据项目需求对Webpack配置进行微调，实现更高效和定制化的构建流程。
Webpack详细开发教程
weixin_44867704的博客
07-22 1507
webpack详细开发教程
webpack基础知识二：说说webpack的构建流程?
Allen-Ye博客
08-03 1285
说说webpack的构建流程?
webpack学习——webpack构建流程
weixin_46677736的博客
01-25 398
在以上过程中，Webpack 会在特定的时间点⼴播出特定的事件，插件在监听到感兴趣的事件后会执⾏特定的逻辑，并且插件可以调⽤ Webpack 提供的 API 改变 Webpack 的运⾏结果。等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。该对象是编译阶段的主要执行者，主要会依次下述流程：执行模块创建、依赖收集、分块、打包等主要任务的对象。的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来。中的模块，或者是动态引入的模块。
跟着Blue学Webpack吧！！！（图文详解，原来Webpack如此简单）
Blue的博客
07-06 2831
http://【前端构建工具（webpack&vite）教程 李立超】https://www.bilibili.com/video/BV1Kd4y147gg?概念 | webpack 中文文档 (docschina.org)Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。注意：这个文件是在node.js环境下运行的，所以不能用前端模块规范使用而是使用入口起点(entry point)
Webpack--入门只看这一篇就够了(图文＋代码）
热门推荐
小庄zzz的博客
07-28 2万+
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
手把手教你webpack项目搭建
w_xiaolin的博客
11-17 1114
一、 webpack项目的创建 1、准备阶段 首先我们要了解webpack是干什么的，他就是一个整合模块的工具，其实就是整合javascript代码，就是把分开的代码整理在一起 webpack 官网 https://webpack.js.org/ 国外的网站都是英文的相比你一定头大。 webpack 中文文档 https://www.webpackjs.com/ 环境准备 node 这个必须安装 链接 https://nodejs.org/zh-cn/ 使用 node -v 是否安装完成 因为node
说说webpack的构建流程？
小草莓的博客
04-18 519
⑥ 输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；④ 编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；编译模块：从 Entry 入口文件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找到该模块依赖的模块，递归地进行编译处理。会被执行，这是我们修改最终文件的最后一个机会。
Webpack构建流程详解&优化前端性能\Dev-Server与Proxy\网络攻击\HMR
警警的博客
03-13 1776
通过这一流程，Webpack 将分散的模块打包成浏览器可执行的静态资源，同时支持通过配置和插件实现高度定制化。而分为输入、处理、输出和模块热替换（可选）四个阶段。但模块热替换属于开发时的优化，可能不是核心流程的一部分。Loader 用于处理文件转换，将非 JS 资源（如 CSS、图片）转换为 Webpack 可识别的模块。Plugin 用于扩展 Webpack 功能，处理更广泛的任务（如优化、资源管理）。三个阶段，每个阶段包含多个关键步骤，并通过插件系统扩展功能。根据，Webpack的构建流程分为。
webpack 打包原理及流程解析，超详细！
rkmhr_sef的博客
12-19 5243
友情提示：a.前面会稍微有些枯燥，文字居多（建议还是过一遍），后面就劲爆了！！！b.本文干货满满，非常详细，整理资料到发布文章耗时5个小时+，请大家耐心看本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。
在webpack中，mcompression-webpack-plugin 压缩和其他terser-webpack-plugin css-minimizer-plugin html-webpack-plugin image-webpack-loader的压缩都有啥不一样吗？
最新发布
09-27
<think>我们正在讨论的是webpack中的各种压缩插件和加载器，它们的用途和区别。用户的问题集中在compression-webpack-plugin、terser-webpack-plugin、css-minimizer-webpack-plugin、html-webpack-plugin以及image-webpack-loader之间的区别。 首先，我们需要明确每个工具的作用： 1. **compression-webpack-plugin**：这个插件用于在构建过程中生成压缩后的静态资源（如gzip或brotli格式）。它通常用于对已经构建好的文件（如JS、CSS、HTML）进行进一步压缩，以便在服务器上启用压缩传输，减少网络传输体积。 2. **terser-webpack-plugin**：这个插件用于压缩JavaScript代码。它使用Terser库来最小化和混淆JS代码。它是webpack 4和5中默认的JS压缩工具（在production模式下自动启用），但也可以通过配置进行更细致的控制。 3. **css-minimizer-webpack-plugin**：这个插件用于压缩和优化CSS代码。它使用cssnano或其他CSS处理器来去除无用的空格、注释，并且可以进一步优化CSS（比如合并相同的规则）。在webpack 5中，它用于替代之前的optimize-css-assets-webpack-plugin。 4. **html-webpack-plugin**：这个插件用于简化HTML文件的创建，特别是那些需要包含打包后的bundle（JS和CSS）的HTML文件。它也可以压缩HTML文件（通过配置选项minify），比如移除空格、注释、属性引号等。 5. **image-webpack-loader**：这是一个加载器（loader），用于压缩图片文件（如JPEG、PNG、GIF、SVG）。它可以在图片被file-loader或url-loader处理之前进行压缩，从而减少图片文件的大小。 现在，我们来详细说明它们的区别： - **作用阶段**： - `compression-webpack-plugin` 作用于构建后的文件（即生成压缩版本，如.gz文件）。 - `terser-webpack-plugin` 和 `css-minimizer-webpack-plugin` 作用于代码压缩阶段，是webpack优化（optimization）的一部分。 - `html-webpack-plugin` 主要作用是生成HTML文件，其压缩功能是可选的，作用于HTML文件生成阶段。 - `image-webpack-loader` 作用于模块转换阶段（loader阶段），对图片资源进行压缩。 - **处理内容**： - `compression-webpack-plugin`：处理任意类型的静态文件（通常是JS、CSS、HTML），生成额外的压缩文件（如.gz）。 - `terser-webpack-plugin`：只处理JavaScript代码。 - `css-minimizer-webpack-plugin`：只处理CSS代码。 - `html-webpack-plugin`：主要处理HTML文件（生成和压缩）。 - `image-webpack-loader`：处理图片文件。 - **使用目的**： - `compression-webpack-plugin`：减少网络传输大小（需要服务器配置支持发送压缩文件）。 - `terser-webpack-plugin`：减少JS文件大小，提高执行效率。 - `css-minimizer-webpack-plugin`：减少CSS文件大小。 - `html-webpack-plugin`：生成HTML文件，并可选压缩HTML。 - `image-webpack-loader`：减少图片文件大小。 - **与其他工具的协作**： - `image-webpack-loader`通常与`file-loader`或`url-loader`一起使用，先压缩图片，然后由后者处理。 - `terser-webpack-plugin`和`css-minimizer-webpack-plugin`通常在webpack的`optimization.minimizer`数组中配置，用于覆盖webpack默认的压缩行为（特别是在production模式下）。 - `compression-webpack-plugin`是作为插件（plugins）添加的，它不修改原始文件，而是生成新的压缩文件。 - **压缩方式**： - `compression-webpack-plugin`：使用gzip、brotli等算法压缩整个文件。 - 其他工具都是通过去除不必要的字符、注释、空格，进行代码混淆或图片优化来减小文件大小。 在实际项目中，这些工具可以同时使用。例如： - 使用`image-webpack-loader`压缩图片。 - 使用`terser-webpack-plugin`压缩JS。 - 使用`css-minimizer-webpack-plugin`压缩CSS。 - 使用`html-webpack-plugin`生成并压缩HTML。 - 最后使用`compression-webpack-plugin`为生成的静态资源（JS、CSS、HTML）创建gzip版本。 需要注意的是，`html-webpack-plugin`的压缩功能是内置的（通过minify选项），而其他压缩工具需要单独安装和配置。 根据之前的引用： - 引用[1]提到了`compression-webpack-plugin`的使用。 - 引用[2]提到了`terser-webpack-plugin`用于压缩JS，并且当使用其他压缩插件（如压缩CSS的插件）时，需要配置`terser-webpack-plugin`来覆盖默认的JS压缩。 - 引用[3]提到了`TerserWebpackPlugin`（即`terser-webpack-plugin`）和`CssMinimizerPlugin`（即`css-minimizer-webpack-plugin`）一起使用。 - 引用[4]提到了`html-webpack-plugin`可以压缩HTML。 - 引用[5]没有直接相关，但提到了CSS分离的问题。 因此，我们可以这样总结： ### webpack中各类压缩工具的区别 在webpack构建流程中，不同类型资源的压缩由不同的插件或加载器完成，它们分别作用于不同的环节： #### 1. 文件类型与对应工具 | 文件类型 | 压缩工具 | 作用阶段 | |-----------------|-----------------------------------|------------------| | JavaScript | `terser-webpack-plugin` | 优化(optimization)阶段 | | CSS | `css-minimizer-webpack-plugin` | 优化阶段 | | HTML | `html-webpack-plugin` (minify选项)| 生成HTML阶段 | | 图片 | `image-webpack-loader` | 模块加载(loader)阶段 | | 静态资源(通用) | `compression-webpack-plugin` | 构建完成后 | #### 2. 详细说明 **JavaScript压缩 - terser-webpack-plugin** - 使用Terser库压缩JS代码，移除空格、注释、缩短变量名等[^2][^3]。 - 配置在`optimization.minimizer`中覆盖默认压缩行为[^2]。 - 支持多进程并行压缩提升速度[^3]。 **CSS压缩 - css-minimizer-webpack-plugin** - 基于cssnano压缩CSS，移除注释、空格、优化规则[^2][^3]。 - 同样配置在`optimization.minimizer`数组中。 - 注意：使用后会覆盖webpack默认的JS压缩，需同时配置`terser-webpack-plugin`[^2]。 **HTML压缩 - html-webpack-plugin** - 通过`minify`选项启用HTML压缩（如移除空格、属性引号等）[^4]。 - 不依赖额外插件，内置使用`html-minifier-terser`。 **图片压缩 - image-webpack-loader** - 在图片资源被处理前进行压缩（支持JPEG/PNG/GIF等）[^5]。 - 作为loader配置在模块规则中，需搭配`file-loader`或`url-loader`使用。 **网络传输压缩 - compression-webpack-plugin** - **与其他压缩工具本质区别**：生成额外的压缩文件（如.gz），不修改原始文件[^1]。 - 作用于构建完成后，为静态资源生成压缩版本，需服务器配合支持。 - 可配置多种算法（gzip/brotli）和压缩阈值。 #### 3. 典型配置示例 ```javascript // webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { // ...其他配置 module: { rules: [ { test: /\.(png|jpe?g|gif|svg)$/, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: { quality: 50 } } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ minify: { // HTML压缩配置 collapseWhitespace: true, removeComments: true } }), new CompressionPlugin({ // gzip压缩 algorithm: 'gzip', test: /\.(js|css|html)$/ }) ], optimization: { minimizer: [ new TerserPlugin({ // JS压缩 parallel: true }), new CssMinimizerPlugin() // CSS压缩 ] } }; ``` #### 4. 选择建议 - 所有资源都应进行**内容级压缩**（JS/CSS/HTML/图片）以减小文件体积。 - 生产环境额外启用 **`compression-webpack-plugin`** 提升网络传输效率（需服务端支持）。 - 开发环境可禁用图片压缩等耗时操作以提升构建速度。 §§相关问题§§ 1. 如何验证`compression-webpack-plugin`生成的gzip文件是否有效？ 2. `css-minimizer-webpack-plugin`和`optimize-css-assets-webpack-plugin`有何区别？ 3. 在webpack配置中同时使用多个压缩工具会有什么性能影响？ </think>### Webpack 压缩工具详解及区别 在 Webpack 打包流程中，各类压缩工具针对不同资源进行优化。下表总结了核心差异： | **工具名称** | **压缩对象** | **工作原理** | **输出结果** | **典型配置位置** | |-------------------------------|---------------------|------------------------------------------------|------------------------------|--------------------------| | `compression-webpack-plugin` | 已构建的静态资源文件 | 生成额外的压缩版本（如 .gz） | 原始文件 + 压缩副本 | `plugins` 数组 | | `terser-webpack-plugin` | JavaScript 代码 | 代码混淆、删除空格/注释、Tree Shaking | 压缩后的 JS 文件 | `optimization.minimizer` | | `css-minimizer-webpack-plugin` | CSS 代码 | 删除空格/注释、合并样式规则 | 压缩后的 CSS 文件 | `optimization.minimizer` | | `html-webpack-plugin` | HTML 文件 | 删除空格/注释/冗余属性 | 压缩后的 HTML 文件 | `plugins` 数组 | | `image-webpack-loader` | 图片资源 | 无损压缩算法优化像素数据 | 压缩后的图片文件 | `module.rules` 加载器链 | --- #### 1. **compression-webpack-plugin** - **用途**：为构建产物生成压缩副本（如 .gz 文件），需服务器配合启用压缩传输 - **特点**： - 不修改原始文件，生成额外压缩版本[^1] - 支持多种压缩算法（gzip/brotli） - **配置示例**： ```javascript const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { plugins: [ new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css|html)$/, threshold: 10240, // 仅压缩 >10KB 的文件 }) ] } ``` #### 2. **terser-webpack-plugin** - **用途**：专用 JavaScript 代码压缩工具 - **特点**： - 默认在生产模式启用[^2][^3] - 支持 ES6+ 语法、多进程压缩 - 通过 Tree Shaking 删除未使用代码 - **关键配置**： ```javascript optimization: { minimizer: [ new TerserPlugin({ parallel: true, // 启用多进程 terserOptions: { compress: { drop_console: true } // 删除console } }) ] } ``` #### 3. **css-minimizer-webpack-plugin** - **用途**：专用 CSS 代码压缩工具 - **特点**： - 基于 cssnano 实现深度优化[^3] - 需手动配置（不像 JS 默认启用） - **注意事项**： 使用后会覆盖默认 JS 压缩，需同时配置 `terser-webpack-plugin`[^2] #### 4. **html-webpack-plugin** - **用途**：HTML 文件生成与压缩 - **特点**： - 压缩通过 `minify` 选项启用[^4] - 可基于模板生成 HTML - **配置示例**： ```javascript new HtmlWebpackPlugin({ minify: { collapseWhitespace: true, // 删除空格 removeComments: true // 删除注释 }, template: './src/index.ejs' // 支持多种模板 }) ``` #### 5. **image-webpack-loader** - **用途**：图片资源无损压缩 - **特点**： - 集成 mozjpeg/pngquant 等算法[^5] - 需在 file-loader 前调用 - **配置示例**： ```javascript module: { rules: [{ test: /\.(png|jpe?g)$/, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: { quality: 50 } // JPEG质量降至50% } } ] }] } ``` --- ### 组合使用策略 典型生产环境配置： ```javascript // webpack.prod.js module.exports = { optimization: { minimizer: [ new TerserPlugin(), // JS压缩 new CssMinimizerPlugin() // CSS压缩 ] }, plugins: [ new HtmlWebpackPlugin({ // HTML压缩 minify: { /* 配置 */ } }), new CompressionPlugin() // Gzip压缩 ], module: { rules: [{ test: /\.(png|jpe?g)$/, use: ['file-loader', 'image-webpack-loader'] // 图片压缩 }] } } ``` > **重要提示**：开发环境建议禁用资源压缩（如通过 `disable: process.env.NODE_ENV === 'development'`）以提升构建速度。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值