webpack 中的入口文件，也就是默认的 ./src/index.js。它是 webpack 构建依赖图谱的开口，webpack 会顺着这 index.js 去找其他的文件构建依赖图谱。
可是因为 webpack 默认只能解析 js 文件，所以 index.js 如果引入了其他文件，比如 css 文件，png 文件等等。webpack 就会构建失败，此时就需要 loader 来解析了。
js 中引入 css 文件，这种情况要和 html 中 link 引入 css 文件要区分。**我们还是要必须明确一点，webpack 构建的是 js 文件，并且它的产物也是 js 文件。**所以说 html 中 link 引入 css 文件和 webpack 毫无关系，webpack 完全不起作用，所以也压根不关 css-loader 这些什么事。
webpack 核心一句话：打包 js 文件；由一到多；实际还是由一到一。
打包入口 js 文件生成到出口文件夹中，其中 js 文件引入的其他类型文件，需要 loader 解析；引入的静态资源文件会被复制到出口文件夹中，css 文件则直接被打包到 js 文件中。
由一到多，就是一个 js 文件生成了多个文件到出口文件夹中。
实际还是由一到一是什么意思呢？
没有使用构建工具的时候，我们将所有的东西，css，img，ttf 等都是在 js 文件中引入，被使用。html 只要引入这个 js 文件就行。
现在使用 webpack 构建，本质还是 js 文件 --> js 文件。只是将打包之前散乱在各个文件夹中的 css, img, ttf 文件按webpack 的配置复制到了出口文件中。我们现在想要实现和打包之前一样的效果，依然只需要在 html 中引入打包好的 js 文件就行。
对于模块文件 html 来说，只是 src 引入一个构建前的 js 文件变成了引入一个构建后的 js 文件。这就是 webpack 最基本的使用过程。
当然 webpack 有插件，插件能极大的扩展它的构建能力。
比如对于 html 文件，我们之前都是手动写一个，然后手动引入打包后的 js 文件。利用插件，我们就能让 webpack 自动生成 html 文件，并且自动引入打包后的 js 文件。
依靠 webpack 从 0 搭建一个项目是痛苦的，我们需要装一堆的 loader，配置各种插件，非常不方便。所以 vue 和 react 都基于 webpack 做了自己的脚手架工具。比如 vue-cli ，它其实就是对 webpack 构建 vue 项目做了很多预设。比如 css-loader 这种东西 vue-cli 就不需要你去手动安装了，已经装好了。
vite 也是看不惯 webpack 的复杂，所以 vite 诞生的时候就原生支持了 css，less，postcss ，ts 这些。所以使用 vite 从 0 搭建项目就省事很多。vite 最大的优点，它是个快男。