SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

webpack5 源代码映射 / webpack5教程 / webpack5 SourceMap

将生成的css进行压缩处理

webpack5 css压缩 / webpack5教程 / webpack5 css

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式,会出现闪屏现象，用户体验不好，因此需要单独的 Css 文件，通过 link 标签加载性能才好。

webpack5教程 / webpack5提取css为文件 / webpack5 css提取文件

配置webpack5生产模式，模式可分为开发、生产。

webpack5 配置模式 / webpack5教程 / webpack5开发环境

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

webpack5 Babel / webpack5教程 / webpack5 兼容代码

ESLint 是一个可配置的 JavaScript 检查器。 它可以帮助你发现并修复 JavaScript 代码中的问题。 问题可以是任何东西，从潜在的运行时错误，到不遵循最佳实践，再到风格问题。

webpack5教程 / webpack5 eslint使用 / webpack5 js 语法检查

我们使用的字体图标，需要将它处理，并进行打包处理。

webpack5教程 / webpack5打包图标 / webpack5打包字体

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理, Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

webpack5图片资源打包 / webpack5教程 / webpack5图片处理

学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源。

webpack5教程 / Webpack5 样式资源

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

webpack.config.js 基本配置 / webpack5配置文件说明 / webpack5教程

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

webpack5 入门使用 / webpack5教程