为什么要使用webpack

开发时，我们会使用框架（React、Vue）,ES6模块化语法，Less/Sass等css预处理器等进行开发。

这样的代码想要在浏览器运行必须经过编译成浏览器能识别的JS、Css等语法，才能运行。

所以我们需要打包工具帮我们做完这些事情。

并且打包工具还可以压缩代码、做兼容性处理、提升代码性能等。

总结：

• 将开发框架、语法编译成浏览器能识别的JS、Css等
• 压缩代码
• 兼容性处理
• 提升代码性能

webpack介绍与基本使用

什么是webpack

Webpack是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出。输出的文件就是编译好的文件，就可以在浏览器运行了。

Webpack输出的文件叫做bundle

webpack的module、chunk、bundle是什么

• Module(模块):webpack基本单位，在webpack世界里一切皆模块，webpack会解析这些模块并处理它们之间的依赖关系
• chunk(代码块):chunk是在webpack构建过程中生成的逻辑概念。当webpack解析项目时，它会根据moudle模块之间的依赖关系将他们组织成不同的代码块。默认情况下，Webpack会创建一个包含所有入口点及其依赖项的主要初始化代码块。然而，通过split code代码分割技术，如动态导入import()语法,可以将程序分割为多个更小的代码块，这样可以实现按需加载，从而提高应用的性能。
• Bundle(包):Bundle是最终输出的文件，它是webpack处理完所有模块和chunks后的结果。一个bundle可以包含一个或多个chunks以及它们所需的资源。通常，一个bundle文件包含了运行应用程序所需的所有代码和资源。

总结来说，模块是构建的基本单元，chunks是逻辑上的一组模块，而bundle是实际输出的文件，用于浏览器执行。在开发阶段，你可能会有多个chunks，但在生产环境中，这些chunks会被编译成一个或多个bundle文件供浏览器加载。

webpack如何减少打包体积

Tree Shaking(移除JS中没有使用上的代码)

为什么

开发时我们定义了一些工具函数库，如果没有特殊处理的话我们打包时会引入整个库，但是实际上我们只会用小部分功能。这样将整个库都打包进来，体积就太大了。

是什么

Tree Shaking打包时移除JS中的没有使用上的代码。

注意：Tree Shaking依赖ES Module

怎么用

Webpack已经默认开启了这个功能，无需其他配置

减少Babel生成文件的体积

为什么

Babel为编译的每个文件都插入了辅助代码，使代码体积过大。

Babel对一些公共方法使用了非常小的辅助代码，比如_extend,默认情况下会被添加到每一个需要它的文件中。

可以将这些辅助代码作为一个独立模块，来避免重复引入。

是什么

@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

怎么用

{
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              },

压缩图片（Image Minimizer）

为什么

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

是什么

image-minimizer-webpack-plugin:用来压缩图片的插件。

怎么用

略，看在线学习文档