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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript 函数速查表
Feb 07 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
论坛头像随机变换代码
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
js资料prototype 属性
2007/03/13 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python的常见命令注入威胁
2013/02/18 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
关于python中的xpath解析定位
2020/03/06 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python 绘制可视化折线图
2020/07/22 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
法人授权委托书格式
2014/04/08 职场文书
公司委托书范本5篇
2014/09/20 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
深入理解python协程
2021/06/15 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL