优化代码运行的速度，包括代码加载速度，分割文件等
优化javascript 代码体积，优化图片体积。
开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，提高打包速度。
SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
将生成的css进行压缩处理
由于浏览器存在css3的兼容性，需要在不同的浏览器加前缀，使其兼容可用。
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式,会出现闪屏现象，用户体验不好，因此需要单独的 Css 文件，通过 link 标签加载性能才好。
配置webpack5生产模式，模式可分为开发、生产。
webpack-dev-server 实现代码热更新
HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
ESLint 是一个可配置的 JavaScript 检查器。 它可以帮助你发现并修复 JavaScript 代码中的问题。 问题可以是任何东西，从潜在的运行时错误，到不遵循最佳实践，再到风格问题。
我们使用的字体图标，需要将它处理，并进行打包处理。
每次编译，都存在上次打包的文件，为了避免脏数据，需要进行清理，使用webpack5只需要加个参数即可完成。
过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理, Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源。
在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。
Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
谷歌插件管理标签页教程，建立标签页，移动标签页，分组标签页
谷歌插件官方例子 Inject scripts into the active tab
