脚本宝典收集整理的这篇文章主要介绍了Webpack + Vue-loader 全解析系列 -（1）介绍篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍

@H_512_2@Vue-loader 是什么？

vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。

vue-loader 提供了一些非常酷炫的特性：

@H_360_16@

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 的时候，基本上就扫清了大多数障碍了。

脚本宝典总结

以上是脚本宝典为你收集整理的Webpack + Vue-loader 全解析系列 -（1）介绍篇全部内容，希望文章能够帮你解决Webpack + Vue-loader 全解析系列 -（1）介绍篇所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。