Webpack + Vue-loader 全解析系列 -(1)介绍篇

介绍

Vue-loader 是什么?

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

  • ES2015默认可用;

  • 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade。

  • <style><template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。

  • 对每个组件模拟有作用域的CSS。

  • 开发阶段支持组件的热加载。
    简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么?

如果你熟悉 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 的时候,基本上就扫清了大多数障碍了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值