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 win 7透明弹出层效果的简单代码
Aug 06 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
JavaScript 特殊字符
2007/04/05 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
出资证明书范本(标准版)
2014/09/24 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书