Vue + Webpack + Vue-loader学习教程之相关配置篇


Posted in Javascript onMarch 14, 2017

前言

之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情。下面就来看看相关配置篇,感兴趣的可以参考学习。

使用预处理器

在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用。vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码。它会根据 lang 属性自动用适当的加载器去处理。

CSS

例如,我们编译用 SASS 编译 <style> 标签:

npm install sass-loader node-sass --save-dev
<style lang="sass">
 /* 这里写一些 sass 代码 */
</style>

在引擎内,首先,<style> 标签内的内容会被 sass-loader 编译,然后再被进一步处理。

JavaScript

默认情况下,Vue 组件内的所有 JavaScript 会被 babel-loader 处理。当然,你也可以更改:

npm install coffee-loader --save-dev
<script lang="coffee">
 # 这里写一些 coffeescript!
</script>

Templates

处理模板的过程有点不同,因为大多 Webpack 模板加载器(比如 jade-loader )会返回一个模板处理函数,而不是被编译过的 HTML 字符串。我们只要安装 jade ,而不是 jade-loader :

npm install jade --save-dev
<template lang="jade">
div
 h1 Hello world!
</template>

重要提示: 如果你使用 vue-loader@<8.2.0, 你也需要安装 template-html-loader.

内联加载请求

在 lang 属性上,你能使用 Webpack loader requests :

<style lang="sass?outputStyle=expanded">
 /* use sass here with expanded output */
</style>

但是,注意这样只适用特定的 Webpack,并不兼容 Browserify 和 vueify。 如果你想让你的 Vue 组件发布成一个第三方组件的话,避免这样使用

URL资源处理

默认情况,vue-loader 是自动用 css-loader 和 Vue 组件编译器来处理样式和模板文件的。在处理过程中,所有的资源 URL 比如<img src="..."> , background: url(...) 和 CSS @import 都是被当做依赖的模块来处理。

例如,url(./image.png) 被转译成 require('./image.png')

<img src="../image.png">

如上会被再转译成:

createElement('img', { attrs: { src: require('../image.png') }})

因为 .png 并不是个 JavaScript 文件,你需要配置 Webpack 使用 file-loader 或者 url-loader 处理它们。项目脚手架工具 vue-cli 也能帮你配置这些。

这样做的好处是:

  1. file-loader 允许你指定在哪里复制和存放静态资源文件 ,以及用版本哈希值命名从而更好利用缓存。 这意味着,可以把图片放到 *.vue 文件旁边,可使用相对路径,而不需要担心发布时候的 URL。使用适当的配置,Webpack 在打包输出的时候,会自动把文件路径转为正确的 URL。
  2. url-loader 允许你内联 base-64 数据格式的URL资源,如果小于设定的阈值。这样可以减少 HTTP 请求小文件的数量。如果文件大于这个阈值。会自动it automatically falls back to file-loader.

加载器高级配置

若你想自定义载器的配置,不要 vue-loader 来推断。 或你只想覆盖加载器内置的配置。 那就这样做,在你 Webpack 配置文件里,添加一个 vue 块,并指定 loaders 选项:

Webpack 1.x Example:

// webpack.config.js
module.exports = {
 // other options...
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue'
  }
 ]
 },
 // vue-loader 配置
 vue: {
 // ... 其他 vue 选项
 loaders: {
  // 用 coffee-loader 加载所有没有 "lang" 属性的 <script> 
  js: 'coffee',
  // 直接把 <template> 作为 HTML 字符串来加载,不需先用 vue-html-loader 处理。
  html: 'raw'
 }
 }
}

Webpack 2.x (^2.1.0-beta.25):

module.exports = {
 // 其他选项...
 module: {
 // module.rules 是和版本1.x中的 module.loaders 是相同的
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue',
  // vue-loader 选项在这里配置
  options: {
   loaders: {
   // ...
   }
  }
  }
 ]
 }
}

这里是个实际的加载器配置高级用法的实例 提取组件内的 CSS 到单独文件。

提取CSS到单独文件

如下是提取所有程序的 Vue 组件中的 CSS 到一个单独的 CSS 文件的配置:

Webpack 1.x

npm install extract-text-webpack-plugin --save-dev
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
 // other options...
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue'
  },
 ]
 },
 vue: {
 loaders: {
  css: ExtractTextPlugin.extract("css"),
  // 你也能包含 <style lang="less"> 或其他语言
  less: ExtractTextPlugin.extract("css!less")
 }
 },
 plugins: [
 new ExtractTextPlugin("style.css")
 ]
}

Webpack 2.x (^2.1.0-beta.25)

npm install extract-text-webpack-plugin@2.x --save-dev
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
 // 其他选项...
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue',
  options: {
   loaders: {
   css: ExtractTextPlugin.extract({
    loader: 'css-loader',
    fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
   })
   }
  }
  }
 ]
 },
 plugins: [
 new ExtractTextPlugin("style.css")
 ]
}

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
canvas实现刮刮卡效果
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 #Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 #Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 #Javascript
jQuery ajax实现省市县三级联动
Mar 07 #Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
OpenLayers3实现测量功能
2020/09/25 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python实现祝福弹窗效果
2019/04/07 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python常量折叠基础知识点讲解
2021/02/28 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
C#面试题
2016/05/06 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
Java程序员面试题
2016/09/27 面试题
中学生团员自我评价分享
2013/12/07 职场文书
职位说明书范文
2014/05/07 职场文书
机械专业求职信
2014/05/25 职场文书
模具专业求职信
2014/06/26 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
php访问对象中的成员的实例方法
2021/11/17 PHP
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server