webpack这部分，可以去b站看尚硅谷的webpack课程。
为什么webpack打包慢？为什么vite会比webpack快？如果想提高webpack速度，应该怎么做？
vite:默认支持css,ts,js,json。而且使用less,sass也不需要对应的loader，只需要安装对应的库就行。
说说webpack编译打包的流程
webpack 是一个静态模块化打包工具，为现代的js应用程序。
- 打包：一个打包工具
- 静态：将代码打包成最终的静态资源部署到服务器上。
- 模块化：支持各种模块化开发。
- 现代：随着现在的技术应用而生。 webpack默认只能打包js和json文件。如果想要支持打包其他的资源，那么就需要进行配置。它具有5个核心概念
- entry: 指定打包的入口文件，分析构建依赖关系图。
- output：webpack打包后的资源放在哪里。
- mode: 指定打包的环境。development, production。
- loader: 让webpack可以打包处理其他资源的模块。
- plugin: 可以用于执行更广的任务。比如打包优化，资源管理，环境变量注入等等。
通过在webpack.config.js中指定entry入口文件，output出口文件（filename， path）来，由于webpack只能打包js和json文件，所以我们可以通过loader和plugin来进行对webpack打包的扩展，使其可以打包图片（url-loader），css（style-loader, css-loader），字体图标(file-loader)等资源，我们也可以根据开发环境和生产环境来进行对打包项目的优化，然后通过webpack指令来进行打包。
但是webpack5之后，将非文本文件资源打包通过asset资源模块，不需要url-loader, file-loader等loader。
url-loader和file-loader的区别：前者是将非文本小文件转化为base64 URI。减少对服务器的请求。
说一下对tree-shaking的了解，对CommonJS和ESM都可以用tree-shaking吗
tree-shaking: 1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打倒bundle里面去，tree shaking就是只把用到的方法打包到bundle，没用到的方法会在uglify阶段被擦除掉。
用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。
- 代码不会被执行，不可达。
- 代码执行结果不会被用到。
- 代码只写不读。
需要将 mode 配置设置成development。
只支持es6语法，commonjs不支持。
webpack5优化了tree-shaking对于嵌套模块的处理。
webpack5优化内部模块代码
webpack中plugin和loader的区别，它们的执行时机，以及常用的plugin和loader
二者之间的区别：
- loader从字面的意思理解，是加载的意思。由于webpack 本身只能打包js，json文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。loader是运行在NodeJS中。仅仅只是为了打包。
- plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
执行时机是什么意思？？？
如果说loader是在打包到那个文件的时候加载，那么plugin呢？在webpack打包的整个时期都起作用吗？？？
css-loader的作用是什么？不使用css-loader行不行
'style-loader', 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效 。 'css-loader' ,将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串 。
不行，因为webpack默认不会打包css文件。
如何让webpack支持vue的sfc文件
安装vue-loader, @vue/compiler-sfc。
并且配置一下对应的vue插件。
const { VueLoaderPlugin } = require("vue-loader/dist/index"); new VueLoaderPlugin();
不然会报这个错误
