Vue 单文件组件为什么离不开 Webpack：从 .vue 文件说起

很多人第一次看到 Vue 的 .vue 文件时，都会觉得这东西很顺手。

模板、脚本、样式放在一个文件里，写组件时非常舒服。可写得顺手，不代表浏览器天生认识它。

浏览器并不理解 .vue 文件，能让这套写法成立的，背后其实是构建工具。

单文件组件为什么好用

单文件组件最大的好处，是把一个组件真正聚合在一起。

一个组件通常本来就包含三部分：

• 结构
• 逻辑
• 样式

以前这些内容可能散落在多个文件里，维护起来总要来回切。SFC 的好处就在于，组件边界更完整。

但浏览器并不会直接执行它

.vue 文件不是浏览器原生支持的格式，所以它必须先被处理。

这里 Webpack 的价值就体现出来了。它不是在“帮你写 Vue”，而是在帮你把这些开发阶段的写法转换成浏览器能运行的代码。

vue-loader 的角色

如果说 Webpack 是总调度，那 vue-loader 就是专门处理 .vue 文件的那一层。

它会把：

• <template>
• <script>
• <style>

拆开处理，再交给对应的 loader 去接力。

这也是为什么你在 Vue 项目里明明只写了一个组件文件，最后浏览器却能正常拿到 JS 和 CSS。

Webpack 不只是打包

很多初学者会把 Webpack 理解成“把文件合并一下”。实际上在 Vue 项目里，它做的事情远不止这些。

例如：

• 处理单文件组件
• 转换 ES Module
• 编译样式预处理器
• 处理图片和字体资源
• 做代码拆分

说到底，它在替你把开发体验和浏览器运行环境之间的差距补上。

写在最后

Vue 单文件组件之所以让人觉得自然，是因为 Webpack 把复杂度挡在了后面。

你写 .vue 文件时感受到的是组件化的轻松，但这份轻松本身，就是工具链替你换来的。理解这一点之后，再看 Vue 项目的构建过程就不会那么抽象了。