前言

为什么我之前文章会花费大量的篇幅去输出webpack相关的内容，说明了webpack在前端工程化中担当着非常重要的角色，像loader也好，plugin也好，一些优化的点也好，之前的文章都有提及，如果你对webpack不熟悉，对前端工程化不熟悉，可以耐心去翻看我之前的相关的文章。鉴于分享文章的节奏我喜欢是渐进式的，当你了解了一些前置的点之后，顺藤摸瓜再往下看就会变得容易的很多。所以今天我们来到了日常开发中常常会用但不会关注的vue-loader。

vue-loader

why

首先我们思考，为什么我们可以写.vue后缀的SFC（单文件组件）？不会想当然的以为因为我们用vue开发所以就可以直接这样写吧。肯定不会的吧，构建工具有很多，像webpack，vite，我们因为要对vue-loader进行展开，所以明确是围绕着webpack的，如果你有兴趣还可以去研究vite相关。
ok，既然我们之前了解过，webpack处理不了js之外的代码，那么聪明的你现在一定知道了是通过loader来实现代码转换的对吧，因为有了loader的处理所以我们才可以在源代码里开开心心的去写便于我们维护的SFC。

what

随着我们的思绪，应该飘到了官网，看下官方的定义：

简而言之，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Vue.js 应用。

how

为什么平时工作中你没有去关注vue-loader，因为绝大多数时间都是用脚手架来搭建项目，很少说让你手动去搭一个vue的工程，为了给我们“自找麻烦”，今天我们手动去用webpack结合vue-loader去搭建一下：
1.安装运行时依赖vue，以及开发时所需的依赖：

2.编写我们的配置文件：

3.然后编写我们的入口文件以及html模版还有src目录下的源码：

4.非常的简洁清晰对吧，此时我们运行npm run dev来打包我们的项目，然后到浏览器打开我们生成的dist目录下的index.html，同时打开浏览器控制台：

ok，至此不靠脚手架通过webpack也可以搭建属于你自己的vue的项目了，这个过程很重要，很多人可能不知道该如何提升技能的深度，一定要找到正确方向，基于此你再进行对vue-loader的源码进行学习是否更加容易了许多呢，学东西一定不要急，你只有把基础和前置掌握了，才能一步一步的往更上层走，这也是我为什么费尽心思用最简单易懂的方式去分享webpack的原因。

尾声

虽然这些思考对于我们提升编写业务代码的带来不了帮助，但是有助于我们去尽可能认识一个事物的全貌，其实工作时间越久，关注的往往不是效果的实现，而是思维的积累，当你慢慢知道某些事情的本质的时候，在日常工作中才会变得更加的轻车熟路。