Webpack5 - Eave Luo

📄️ 前言

本模块将带领大家了解 Webpack5 的基本概念和使用方法，以及一些常见的配置项和插件，请将 Node.js 版本至少升级到 10.13.0 及以上（使用最新 LTS 版本最佳）。

介绍 Webpack5 的基本使用

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

Webpack 本身不能识别样式资源，需要借助 Loader 来解析样式资源。应优先从 Webpack 官方 Loader 文档找到对应的 Loader，如无法找到，可从社区或 GitHub 搜索查询。

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理。

如果需要修改 Webpack 输出资源的名称和路径，可以通过配置 output 选项来实现。

在之前的处理中，我们想要看到一些效果需要手动删除了上一次打包的资源，但这显然是不够方便，所以 Webpack 提供了自动清空上次打包资源的功能。

在实际开发中，我们经常会用到字体图标、音频、视频等其他资源，Webpack 如何处理字体图标资源呢？下列以字体为例，介绍 Webpack 如何处理其他资源。

ESLint 是一个开源的 JavaScript 代码静态分析工具，用于发现和修复代码中的问题。它最初由 Nicholas C. Zakas 于 2013 年创建，旨在提供一个高度可配置的 linting 工具，可以根据项目的需求进行调整。

Babel 是一个广泛使用的 JavaScript 编译器，主要用于将现代 JavaScript 代码（包括 ES6+）转换为向后兼容的版本，使其可以在所有浏览器或环境中运行。

html-webpack-plugin 通过自动生成 HTML 文件的方式，极大简化了开发者手动管理 HTML 文件的工作。该插件会根据 Webpack 的输出，自动将打包后的资源（如 JS、CSS 文件）插入到生成的 HTML 文件中，并且可以根据模板文件生成最终的 HTML 文件。

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

在实际开发中，我们往往会有开发环境和生产环境，两者的配置会有差异。本文将介绍 Webpack 如何分别搭建开发环境和生产环境。

对于 CSS 的处理，还有很多可以优化的地方，下面从提取 CSS 成单独文件，CSS 兼容性处理，CSS 压缩等方面进行介绍。

SourceMap 是一种用来调试压缩或编译后代码的技术。它将压缩或编译后的代码映射回原始源代码，从而使开发者能够在浏览器的开发者工具中查看原始代码并进行调试。

webpack5 除了前面的基础配置，还可以通过配置提升打包构建速度。

在实际开发中，项目体积会越来越大，代码量也会越来越多，这时候我们就需要对代码进行压缩，减少体积。

在打包代码时，所有 JS 文件会被打包到一个文件中，导致体积过大。如果我们只需要渲染首页，就应该只加载首页的 JS 文件，而不加载其他文件。因此，我们需要对打包生成的文件进行代码分割，生成多个 JS 文件。这样一来，渲染哪个页面就只加载对应的 JS 文件，减少加载资源，提高速度。

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。

loader 是 webpack 的核心，它帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。