1.webpack5对比webpack4做了哪些优化
Webpack 5 对比Webpack 4 存在一些重要的优化。Webpack 5 在性能、构建速度、Tree Shaking 等方面都有所改进：
-
性能改进：
- Webpack 5 在构建速度和性能方面有所提升。这主要是通过改进缓存策略、优化构建算法以及增强的持久化缓存等方式实现的。这意味着更快的构建时间和更高的整体性能。
-
支持Tree Shaking：
- 在 Webpack 5 中，Tree Shaking（树摇）机制得到了改进，这意味着它更有效地识别和删除未使用的代码，以减小最终构建的文件大小。
-
对ES6模块和JSON模块的优化：
- Webpack 5 对于 ES6 模块和 JSON 模块的处理更加智能和优化，从而提高了构建速度。
-
默认持久化缓存：
- Webpack 5 默认启用了持久化缓存，这意味着构建过程中的中间结果会被缓存，以便在后续的构建中重复使用，进而加快构建速度。
-
改进的 Tree Shaking 算法：
- Webpack 5 中对 Tree Shaking 算法进行了改进，使其更加精确和高效，从而能够更好地识别和删除未使用的代码。
-
内置的模块类型优化：
- Webpack 5 提供了一种新的模块类型——
module.type，可以通过配置文件进行设置，以便更好地与不同的目标环境进行兼容和优化。
- Webpack 5 提供了一种新的模块类型——
2.webpack5的核心原理
Webpack 5 的核心原理涉及了模块化、依赖分析、打包优化等多个方面。下面是Webpack 5 的核心原理的概述：
-
模块化：
- Webpack 5 将项目中的各个文件视为模块，这些模块可以是 JavaScript 文件、CSS 文件、图片、字体等各种资源。它使用模块化的思想来管理这些文件，使得项目的各个部分可以相互依赖、独立开发和测试。
-
依赖分析：
- 在构建过程中，Webpack 5 会对项目中的模块进行依赖分析，即分析模块之间的依赖关系。通过识别模块之间的 import、require 等语句，Webpack 能够确定模块之间的依赖关系，从而构建出一个依赖关系图，这也是 Webpack 5 能够正确地打包项目中所有依赖的基础。
-
打包优化：
- Webpack 5 会根据依赖关系图进行打包优化。这包括但不限于：
- Tree Shaking：删除项目中未使用的代码，以减小打包后的文件大小。
- 代码分割：将项目代码拆分为多个块，按需加载，从而提高页面加载速度。
- 持久化缓存：通过缓存构建过程中的中间结果，减少重复工作，提高构建速度。
- 多线程构建：利用多线程或者多进程来并行处理模块，加快构建速度。
- 模块类型优化：根据目标环境，优化模块类型，提高兼容性和执行效率。
- 自动刷新：在开发过程中，Webpack 5 会监视文件的变化，并实时更新构建结果，提供热更新功能。
- Webpack 5 会根据依赖关系图进行打包优化。这包括但不限于：
-
插件系统：
- Webpack 5 提供了丰富的插件系统，允许开发者通过插件来扩展和定制 Webpack 的功能。通过插件系统，开发者可以在打包过程的各个阶段介入，实现自定义的功能，比如代码压缩、资源优化、文件拷贝等。
-
编译器和解析器：
- Webpack 5 内部包含了编译器和解析器，用于将项目中的源代码转换为可执行的 JavaScript 代码。编译器负责将各种类型的模块转换为标准的 JavaScript 代码，解析器负责解析 JavaScript 代码中的语法，构建 AST（抽象语法树），以便后续的依赖分析和打包优化。
Webpack 5 的核心原理包括模块化、依赖分析、打包优化、插件系统以及编译器和解析器等多个方面，它通过这些机制来实现对项目代码的打包和优化，从而提供了高效、灵活的前端构建解决方案。
3.webpack5实践-常用API
在webpack配置文件webpack.config.js中，下面介绍一些必需要掌握的api：
1. entry（入口）
Webpack 5 的入口配置指定了打包的起始点。可以是一个单一的入口或多个入口。下面举例单一入口代码：
module.exports = {
entry: './src/index.js'
};
搞懂了后，后面我再继续探索多入口，由浅入深，举一反三，加油！！！
2. output（输出）
output 配置项指定了打包后的文件输出的位置和文件名等信息。
module.exports = {
output: {
filename: 'bundle.js', //打包后生成js文件名
path: path.resolve(__dirname, 'dist')。 //js文件在dist目录里头
}
};
3. devServer（开发服务器）
devServer 配置项用于配置开发服务器，提供了许多有用的功能，如自动刷新、热模块替换等。
module.exports = {
devServer: {
contentBase: './dist', //项目打包后生成文件的目录名
port: 8080, //本地运行的端口号
hot: true。//是否开启热更新
}
};
4. mode（模式）
mode 配置项指定了当前构建的环境，可选值有 ‘development’：开发模式、‘production’ ：生产环境和 ‘none’ 。
module.exports = {
mode: 'development' //
};
5. module（模块）
module 配置项用于配置不同类型模块的处理规则，例如配置 loader。
module.exports = {
module: {
rules: [
{
//.js文件loader
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false
}
}
},
{
//.vue文件loader
test: /\.vue$/,
use: 'vue-loader'
},
{
//.css文件loader
test: /\.css$/,
use: [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader'