介绍

Vue-loader 是什么？

vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。 vue-loader 提供了一些非常酷炫的特性：

• ES2015默认可用；
• 在每个 Vue 组件内支持其他的 Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。
• 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。
• 对每个组件模拟有作用域的CSS。
• 开发阶段支持组件的热加载。 简单来说，webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么？

如果你熟悉 Webpack 那就跳过这部分吧，但对于那些新手们，请看下这个简单介绍吧：

Webpack 是一个模块打包工具。在开发中，它把一堆文件中每个都作为一个模块处理，找出它们间的依赖关系，并打包成待发布的静态资源。

列举一个基本例子，设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行，所以需要把它们 捆绑 成 <script> 标记内的单一文件。Webpack 就能按照 require() 调用的依赖关系为我们做到这点。

实际上，Webpack 能做的更多，通过 "loaders" 我们能让 Webpack 按照我们想要的任何方式打包输出。例如：

• 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块；

• 编译之前，可以通过 linter 校验源代码。

• 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。

• 编译 SASS 文件成 CSS，然后把生成的CSS插入到 <style> 标签内，然后再转译成 JavaScript 代码段。

• 处理在 HTML 或 CSS 文件中引用的图片文件，根据配置路径把它们移动到任意位置，根据 MD5 hash 命名。

• 如果你学会了Webpack，就会知道它有多么强大，它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦，但是有了我这份使用指南，那使用 Webpack + Vue + vue-loader 的时候，基本上就扫清了大多数障碍了。