webpack和vue-loader

随着前端向全端的慢慢转变。我发现要学的东西太多了，今天我就写点关于webpack的一些入门知识。巩固下自己的知识体系，顺便也能帮助一些刚入门的新手。
webpack
一个模块打包工具。把工程中每个文件作为一个模块，找出其中的依赖关系，将其打包成可部署的静态资源。

what-is-webpack.png
一个基本的例子，想像我们有一些 CommonJS 模块，它们不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过 <script> 标签加载。webpack 可以遵循 require() 调用的依赖关系，为我们完成这些工作。

那么loader是什么东东呢？官网上解释为文件的预处理器。换句话说webpack处理各种资源的时候，需要加载各种loader，比如处理html使用了html-loader,处理css，使用style-loader,css-loader等。以下就是一些例子：

• 转换 ES2015，CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块；
• 可以选择在编译之前检验你的源代码；
• 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中；
• 将 Sass 文件转换为纯 CSS，然后将其转换成 JavaScript 片段，将生成的 CSS 作为 <style> 标签插入页面；
• 处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名。
  vue-loader
  做vue+webpack项目的时候需要加载vue-loader。它的作用就是将vue组件转换成js模块。
  下面就是一个最简单vue组件。后缀名为.vue的文件。
  image.png
  vue-loader提供以下特性：
• 默认支持 ES2015；
• 允许对 Vue 组件的组成部分使用其它 webpack loader，比如对 <style> 使用 Sass 和对 <template> 使用 Jade；
• .vue 文件中允许自定义节点，然后使用自定义的 loader 进行处理；
• 把 <style> 和 <template> 中的静态资源当作模块来对待，并使用 webpack loader 进行处理；
• 对每个组件模拟出 CSS 作用域；
• 支持开发期组件的热重载。

因此，在做vuejs项目时，webpack+vue-loader就组成了一个强大的workflow。