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的AJAX用法
May 10 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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
PHP制作图形验证码代码分享
2014/10/23 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python变量的作用域是什么
2020/05/26 Python
python代码中怎么换行
2020/06/17 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
家长给孩子的表扬信
2014/01/17 职场文书