likes
comments
collection
share

从零开始学习Webpack入门

作者站长头像
站长
· 阅读数 11

两年前我还在一家公司上班，做前端开发，但觉得大专学历上限会相对低，所以萌生了升本的想法。

现在专升本应届，发现找工作跟 20 年之前相比真的是太难了。

简历投了很多份，有面试机会，但都pass 。要么不是期望高，要么就 3k 白菜价哈哈哈。

栽树的时间最好是十年前，其次是现在。

参与字节前端青训营PPT，结合 ChatGPT 记录 重新学习一下Webpack。

一、为什么要重新学习webpack？

  学习Webpack是因为它是现代前端开发中非常重要的工具和技术之一。 现在前端开发离不开工程化思想。

  应此了解Webpack的基本概念和术语是必要的，例如入口（entry）、输出（output）、加载器（loader）、插件（plugins）等。理解这些概念对于理解Webpack的工作原理至关重要。

从零开始学习Webpack入门

学习webpack是因为它是一个广泛使用的现代前端构建工具，具有以下几个重要的原因。

1. 模块化管理

  Webpack是一个模块打包工具，它可以将项目中的各种资源，如JavaScript、CSS、图片等，视为模块，并将它们打包成适合在浏览器中运行的静态文件。通过使用Webpack，你可以轻松管理和组织你的项目代码，将代码拆分为模块，并通过依赖关系构建模块之间的依赖。

2. 代码分割与懒加载

  Webpack支持代码分割，这意味着你可以将大型的代码库拆分为较小的块，并在需要时按需加载。这可以提高应用程序的性能，减少初始加载时间，并降低资源的带宽消耗。通过懒加载，你可以在用户需要时动态加载代码，从而提供更好的用户体验。

3. 资源优化与压缩

  Webpack提供了丰富的插件和功能，用于优化和压缩你的项目资源。你可以使用各种插件来优化你的代码、压缩文件大小、移除无用代码等，以提高应用程序的性能和加载速度。

4. 开发环境与生产环境配置

  Webpack可以根据你的开发环境和生产环境的不同需求进行灵活的配置。你可以设置开发环境下的热模块替换（Hot Module Replacement）和代码调试功能，以提高开发效率。同时，你也可以配置生产环境下的代码优化、压缩和缓存策略，以提供更好的用户体验。

5. 生态系统与插件支持

  Webpack拥有庞大的生态系统和活跃的开发社区。你可以通过使用各种插件和加载器（Loaders）来扩展Webpack的功能，从而满足不同项目的需求。例如，你可以使用Babel加载器来转译ES6+语法，使用CSS加载器来处理CSS文件，使用图片加载器来处理图片等。

从零开始学习Webpack入门

webpack本质上是前端资源编译，打包工具

从零开始学习Webpack入门

二、使用 webpack

  在学习Webpack之前，首先需要安装Webpack。 可以使用npm（Node Package Manager）或者yarn来安装Webpack。通过在终端中运行命令npm install webpack webpack-cli --save-dev，即可安装Webpack和Webpack命令行接口。

1. 安装

 在学习Webpack之前，首先需要安装Webpack。可以使用npm（Node Package Manager）或者yarn来安装Webpack。通过在终端中运行命令npm install webpack webpack-cli --save-dev，即可安装Webpack和Webpack命令行接口。

npm -D webpack webpack-cli

2. 编辑配置文件 webpack.config.js

  在项目的根目录下创建一个名为webpack.config.js的文件。Webpack的配置文件用于指定入口文件、输出目录、加载器、插件等相关配置。

   在Webpack配置文件中，设置入口文件和输出目录。入口文件是你的应用程序的主要入口点，而输出目录是Webpack打包后生成的文件的存放位置。

  Webpack通过加载器来处理不同类型的文件。加载器可以将文件转换为Webpack可识别的模块。例如，你可以使用Babel加载器来处理ES6/ES7代码，将其转换为兼容的ES5代码。

  Webpack插件可以执行各种任务，例如优化代码、压缩文件、生成HTML模板等。通过配置插件，可以进一步定制和优化Webpack的构建过程。

3. 执行编译命令 npx webpack

  在终端中运行npx webpack命令，Webpack将根据你的配置文件进行构建和打包。构建完成后，你将在输出目录中找到生成的打包文件。

从零开始学习Webpack入门

  • 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
  • 工具类：主流程之外，提供更多工程化能力的配置项

使用频率较高的

  1. 项目入口处理 entry

  2. 依赖解析 require

  3. 资源解析 module

  4. 资源合并打包输出 output

    期间递归调用 23

  • entry
  • mode -devtool
  • output
  • module -》可以定义处理 css 模块规则 test：/.css/ use；【'style-loader'，'css-loader'】

三、webpack 进阶

  一旦你掌握了Webpack的基础知识，可以进一步学习和探索Webpack的高级特性。  例如代码分割（code splitting）、懒加载（lazy loading）、热模块替换（hot module replacement）等。这些特性可以帮助你优化应用程序的性能和开发体验。

  通过实践和将Webpack应用于实际项目中，加深对Webpack的理解和熟练度。尝试使用Webpack构建不同类型的应用程序，如单页应用（SPA）或多页应用（MPA），并探索Webpack在项目中的灵活性和可扩展性。   Webpack有详细的官方文档，包括指南、配置选项和示例代码。此外，还有许多优秀的Webpack教程、博客和视频资源可供参考。利用这些资源，进一步扩展你对Webpack的知识。

Babel 代码转义工具

  Babel是一个广泛使用的JavaScript代码转义工具，用于将新版本的JavaScript代码转换为向后兼容的旧版本。它可以帮助开发者在不同的浏览器和环境中运行具有最新语言特性的JavaScript代码。

1. 安装依赖

npm i -D @babel/core

babel 具体有什么功能

以下是一些关键的特点和用途：

  1. 语法转换：Babel可以将使用较新的JavaScript语法（如ES6、ES7等）编写的代码转换为兼容旧版JavaScript引擎的语法。这样，你可以在旧版浏览器中使用最新的语言特性而无需担心兼容性问题。
  2. 浏览器兼容性：通过配置Babel的插件和预设，你可以针对不同的浏览器和环境生成兼容性良好的代码。Babel可以根据目标浏览器的支持情况，自动将代码转换为适当的形式。
  3. 插件系统：Babel提供了一个插件系统，允许你根据需要自定义和扩展代码转换过程。你可以选择使用各种插件来处理特定的语法转换或功能增强。
  4. 装饰器和扩展：Babel还支持一些实验性的JavaScript语法扩展，如装饰器（Decorators）和类属性（Class Properties）。这些扩展允许你在代码中使用更丰富的语法和功能。
  5. 构建工具集成：Babel可以与各种构建工具（如Webpack、Rollup、Parcel等）无缝集成。通过将Babel配置为构建工具的一部分，你可以自动将代码转换为兼容的形式，并进行优化和打包。
  6. 插件生态系统：Babel拥有庞大的插件生态系统，涵盖了各种语法转换、功能增强和工具支持。你可以根据自己的需求选择合适的插件，并与社区共享和贡献自己的插件。

babel 与 Webpack 分别解决了什么问题？为何两者能协作到一起？

Babel是一个强大的JavaScript代码转义工具，可帮助开发者在不同的环境中使用最新的JavaScript语法和特性。它为我们提供了更大的灵活性和便利性，使我们能够更好地编写和维护现代化的JavaScript代码。 Babel和Webpack是两个在前端开发中经常一起使用的工具，它们分别解决了不同的问题，并且能够很好地协作一起使用。

Babel的主要作用是将新版本的JavaScript代码转换为向后兼容的旧版本。随着JavaScript语言的不断发展和更新，新的语法和特性不断被引入。然而，不同的浏览器和环境对这些新特性的支持程度有所差异，这导致开发者在编写代码时面临浏览器兼容性的问题。Babel通过将使用新特性编写的代码转换为可在各种浏览器中运行的旧版代码，解决了浏览器兼容性的问题。

Webpack是一个模块打包工具，用于处理和打包前端资源文件。它的主要功能是将多个模块和资源文件打包成一个或多个最终的静态文件。这样做的好处是可以将应用程序的各个部分进行模块化开发，提高代码的可维护性和复用性，并通过打包工具的优化功能（如代码压缩、按需加载等）来提高应用程序的性能和加载速度。

Babel和Webpack能够协作一起使用的原因在于它们在前端开发流程中的角色不同。Babel主要负责处理JavaScript代码的转换，而Webpack负责模块打包和资源管理。在Webpack的配置中，可以通过加载器（loader）来引入Babel，将JavaScript代码交给Babel进行转译。这样，在Webpack的打包过程中，Babel会对JavaScript代码进行转换，将新版本的语法转换为向后兼容的旧版语法，然后将转译后的代码交给Webpack进行打包处理。

通过Babel和Webpack的协作，开发者可以充分利用它们各自的优势。Babel确保代码在不同浏览器和环境中的兼容性，使开发者能够使用最新的语法和特性。Webpack提供了灵活的模块打包和资源管理能力，使开发者能够更好地组织、优化和部署前端代码。综合使用Babel和Webpack，可以提高开发效率、优化代码质量，并改善应用程序的性能和用户体验。

webpack——生成 HTML 文件

思考题：相比于手工维护 HTML 内容，这种自动生成的方式有什么优缺点？

优点：

  • 自动化：webpack 可以根据配置和入口文件自动生成 HTML 内容，无需手动编写和维护 HTML 文件，减少了手工操作的工作量，提高了开发效率。
  • 动态更新：webpack 可以根据项目的变化和配置的需求动态更新生成的 HTML 内容，例如根据不同环境生成不同的配置文件、自动添加文件版本号等，确保生成的 HTML 内容始终与项目保持同步。
  • 模板支持：webpack 提供了模板引擎的支持，可以使用模板语法编写动态的 HTML 内容，如引入不同的模块、根据数据生成页面内容等，增强了灵活性和可定制性。
  • 依赖管理：webpack 可以自动处理项目中的依赖关系，并将相关资源（如 CSS、JavaScript、图片等）自动引入到生成的 HTML 内容中，避免手动管理和维护依赖的繁琐工作。

缺点：

  • 学习成本：使用 webpack 自动生成 HTML 内容需要了解和配置 webpack 的相关知识，对于初学者来说可能需要花费一些时间学习和理解 webpack 的工作原理和配置方式。
  • 配置复杂性：对于复杂的项目，webpack 的配置可能会变得复杂，需要合理配置和处理各种情况，如果配置不当可能会导致生成的 HTML 内容出现问题。
  • 可维护性：自动生成的 HTML 内容可能会给维护带来一定的困难，因为它是通过配置和生成规则来生成的，如果需要手动修改和维护生成的 HTML 内容，可能会比手工维护的方式更加复杂。

使用 Webpack——工具线

优化编译过程

使用 Webpack——HMR

实时更新页面 需要手动开启 启动命令：npm webpack server 从零开始学习Webpack入门 开发服务器配置项 watch：true devServer：{hot：true，open：true}

使用 Webpack——Tree-Shaking

树摇：删除无用代码，模块导出了，但未被其他模块使用

在 JavaScript 中，由于模块化的使用，通常会引入多个模块，并且每个模块可能包含很多函数、变量和其他代码。但是，实际上我们可能只使用了其中的一部分代码，而其他未使用的代码对最终的应用程序并没有贡献。

Tree-Shaking 的工作原理是通过静态代码分析来确定哪些代码被实际使用，然后在打包过程中将未使用的代码从最终的输出文件中删除，从而减小文件大小。它依赖于 ES6 模块的静态特性和编译器的支持。

使用 Tree-Shaking 有以下几个优点：

  • 减小文件体积：通过删除未使用的代码，可以减小打包后的文件体积。这对于优化网页加载速度和减少用户下载的数据量非常重要。
  • 提高运行时性能：减少不必要的代码可以提高应用程序的运行时性能，因为浏览器只需要解析和执行实际使用的代码。

要使用 Tree-Shaking，需要满足以下条件：

  • 使用 ES6 模块：Tree-Shaking 只能处理 ES6 模块，因为它们具有静态特性，可以在编译时进行静态分析。
  • 使用支持 Tree-Shaking 的编译工具：例如，Webpack 在生产模式下会自动启用 Tree-Shaking，并通过配置选项和优化插件来进一步优化代码。

需要注意的是，Tree-Shaking 并非完美无缺，它有一些限制和注意事项：

  • 动态导入无法被 Tree-Shaking：由于动态导入的特性，Webpack 无法在编译时确定哪些模块将被导入，因此无法进行 Tree-Shaking。
  • 依赖关系问题：如果存在循环依赖或动态引用的情况，Tree-Shaking 可能无法正确识别未使用的代码。

总结来说，Tree-Shaking 是 Webpack 中的一个优化技术，用于消除未使用的 JavaScript 代码，减小打包后的文件体积，提高应用程序的性能和加载速度。它依赖于 ES6 模块的静态特性和编译工具的支持，可以在合适的条件下帮助我们优化代码。

其他工具：

  • 缓存
  • Sourcemap：提升线上环境调试的效率
  • 性能监控
  • 日志
  • 代码压缩
  • 分包

思考题：还有那些流程类配置？ 工具类配置具体有什么作用？

从零开始学习Webpack入门

四、扩展 Webpack

理解Loader

为了处理非标准的 js 资源，设计出资源翻译模块——loader：用于将资源翻译为标准js

Loader是Webpack中用于处理特定类型文件的插件，它可以将源文件进行转换、编译或处理，以便能够被添加到Webpack构建过程中。

Loader在Webpack的配置文件中的module.rules字段中配置。每个规则(rule)都定义了要处理的文件类型以及使用的Loader。当Webpack在打包过程中遇到匹配规则的文件时，会使用对应的Loader来处理文件。

Loader可以用于执行各种任务，例如：

  • 转换和编译文件：例如将ES6/ES7代码转换为ES5语法，将SCSS或LESS文件转换为CSS，将TypeScript转换为JavaScript等。
  • 静态资源处理：例如处理图片、字体文件，将它们进行压缩、合并或转换为Base64编码等。
  • 代码检查和格式化：例如使用ESLint、Stylelint等工具对代码进行检查和格式化。
  • 预处理器功能：例如使用Babel插件对代码进行优化、添加polyfills或按需加载。
  • 数据处理：例如将CSV、JSON等数据文件转换为JavaScript模块，或对数据进行转换和处理。

Loader可以链式调用，一个文件可以经过多个Loader的处理。Webpack会按照配置中的顺序依次调用Loader，每个Loader对文件进行处理后，将结果传递给下一个Loader，直到最后一个Loader将处理后的结果返回给Webpack。

使用 Loader

  1. 安装 Loader
  2. 添加 module 处理 css
  3. 认识 Loader：链式调用
  4. ndb npx Webpack debug 小技巧

其他特性 链式执行 -支持异步执行 分 norml、pitch 两种模式

进阶篇：理解插件

学习Webpack需要时间和实践。通过不断的练习和探索，你将逐渐掌握Webpack的工作原理和最佳实践，从而能够更好地构建和管理你的Web应用程序。

Webpack的插件系统基于事件机制，插件可以监听Webpack在不同阶段触发的事件，并在事件发生时执行特定的操作。通过插件，可以对构建过程中的模块、资源、编译结果等进行修改、优化或增强。

插件可以用于以下方面：

  • 优化资源：插件可以对输出的资源进行优化，例如压缩CSS、JavaScript，混淆代码，删除未使用的代码等。
  • 处理文件：插件可以处理特定类型的文件，例如处理图片、字体文件，进行压缩、合并或转换等操作。
  • 自动生成文件：插件可以生成特定的文件，例如生成HTML文件、CSS文件，或根据模板生成特定格式的代码文件等。
  • 环境变量注入：插件可以将环境变量注入到打包后的代码中，以便在运行时根据不同的环境做不同的处理。
  • 配置优化：插件可以对Webpack的配置进行优化，例如提取公共代码、拆分代码块、动态加载等。
  • 错误处理：插件可以监听Webpack构建过程中的错误事件，提供自定义的错误处理和报告机制。 Webpack提供了一些内置的插件，同时也支持第三方插件。插件的使用通常需要在Webpack的配置文件中进行配置，并在plugins字段中进行注册。

插件是Webpack中非常灵活和强大的功能扩展机制，通过使用插件，开发人员可以根据项目需求定制构建过程，实现各种自定义的构建任务和优化，从而提高开发效率和项目性能。