专栏首页艺述思维vue 开发常用工具及配置六:认识各种 loader

vue 开发常用工具及配置六:认识各种 loader

本文大约 2400 字。

目录

  • Webpack 的工作原理
  • loader 和 plugin 的区别
  • webpack 如何处理 css 文件
  • 三种样式 sass/scss 和 less 的区别
  • 另一种定义全局 less 变量的方法
  • 源码

Webpack 的工作原理

默认 webpack 只能处理 js 文件,如果在 js 文件中导入了 css 代码:

import './css/style.css';

程序将会报错:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

这与其工作原理有关。webpack 的工作原理是,从配置文件定义的模块列表开始,依赖文件类型选择使用不同的 loader分别进行处理,最后将所有模块打包为bundle,这个 bundle 可由浏览器加载。

Webpack 用于完成打包任务的模块,主要有 loader 与 plugin。有一个类型就有一个 loader,如果 loader 缺失,程序就会报错了。

loader 和 plugin 的区别

loader

用于对模块源码的转换,loader 描述了 webpack 如何处理非 js 模块,并且在 build 过程中引入这些依赖。loader 可以将文件从不同的语言转换为 js,或者将内联图片转换为 data URL。例如sass-loader,css-loader,style-loader等都是 loader。

在 webpack.config.js 中配置 loader 及 module.rules 可以指定多个 loader。

plugin

plugin 存在的目的在于解决 loader 无法实现的其他事,从打包优化和压缩,到重新定义环境变量,可以用来处理各种各样的任务。例如,CommonChunkPlugin 主要用于提取第三方库和公共模块,避免 bundle 体积过大。

webpack 如何处理 css 文件

webpack 中默认只能打包 .js 类型的文件,无法打包其他类型文件。如果要打包非.js类型文件,需要手动安装一些第三方 loader。下面看一下 webpack 在这方面是如何处理的。

在项目中用 npm 命令本地安装 style-loader 和 css-loader 两个包:

npm install style-loader css-loader --save--dev

在引用 style.css 文件时,将 import './css/style.css' 代码修改为:

import 'style-loader!css-loader!./style.css'")';

先经过 css-loader 和 style-loader 的处理,这样css代码就能正常工作了。

这种方式每次引入时都需要加上“style-loader!css-loader!”,比较麻烦。除了这种方法,还可以在工程文件中一次性配置loader,研发中通常采用的是这种方式。

如果是 webpack 工程,打开webpack.config.js文件,在里面新增一个配置节点module,在module对象中,有一个rules属性,它是一个数组,里面存放了所有第三方文件匹配和处理规则。如下代码匹配处理css文件:

module: { // 配置所有第三方loader 模块
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
    ]
  }

注意:此处'style-loader'和'css-loader'顺序不可替换。因为use中处理顺序为从右向左。先用css-loader对css文件进行处理,将处理后的结果交给style-loader作进一步处理。其中,css-loader用于加载、解析css代码;style-loader生成一个内容为最终解析完的css代码的style标签,放在html页面的head内。

对于 vue cli3 创建的项目,在vue.config.js/configureWebpack内,添加如下配置:

config.module.rules.push({ test: /\.css$/, use: ['style-loader', 'css-loader'] })

使用 less

首先是安装插件:

yarn add style-loader css-loader less-loader less

然后修改 vue.config.js 配置:

// use less
config.module.rules.push({ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } )

因为调用顺序是从右向左,所以先使用 less-loader 处理 less 代码,使之成为标准的css 代码,接下来的处理方式就和加载普通的css文件一致了。

这个显式配置与默认配置有差异,导致编译不通过。可以使用如下命令:

vue inspect -v --mode development > config-output.txt

查看默认配置。在 config-output.txt 文本中查看有关 less 的内容,与上面的配置内容有显著差异。

使用 scss

使用scss与使用less类似。

先是安装插件:

yarn add style-loader css-loader sass-loader node-sass

再是配置:

config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }  )

因为项目中使用了 vuetify,在这个项目中混用scss会有编译错误。可以采用同样的方法,使用 vue inspect 指令导出默认配置查看差异所在。

三种样式 sass/scss 和 less 的区别

Sass

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

Scss

Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

less

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行,也可在服务端运行。

1)编译环境不一样

Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件。

2)变量符不一样

Less是@,而Scss是$,而且变量的作用域也不一样。

3)Less没有输出设置

Sass提供4种输出选项。

Sass提供4种输出样式,默认为nested

  • nested:嵌套缩进的css代码
  • expanded:展开的多行css代码
  • compact:简洁格式的css代码
  • compressed:压缩后的css代码

4)Sass支持条件语句

Sass 可以使用if{}else{},for{}循环等等。而Less不支持。

结论:Sass 功能虽比 Less 强大,但 Less 相对清晰明了,易于上手,对环境要求宽松。快速开发使用 less 足够。

另一种定义全局 less 变量的方法

使用 less 不同避免地涉及多个样式文件中的变量共享。在前面一篇文章“vue 开发常用工具及配置三”中,曾使用如下配置完成全局less变量的共享:

pluginOptions: {
 'style-resources-loader': {
   preProcessor: 'less',
   patterns: [
     path.resolve(__dirname, './src/assets/styles/variable.less'),
   ],
 },
},

这是一种使用 plugin 的解决方式,在vue.config.js使用 pluginOptions 通过配置达成。除了这种方法,还可以直接在vue.config.js/css.loaderOptions.less节点下,直接声明全局变量:

loaderOptions: {
  // 给 less-loader 传递 Less.js 相关选项
  less:{
    // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
    // `primary` is global variables fields name
    globalVars: {
      primaryBgColor: '#fff'
    }
  }
}

在vue组件中这样使用:

<style lang="less" scoped>
button{
 color: @theme-color;
 background-color: @primaryBgColor;
}
</style>

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v202001022

参考链接

https://github.com/webpack-contrib/sass-loader

https://www.cnblogs.com/tangjiao/p/10429645.html

webpack的loader和plugin的区别

https://joshuatz.com/posts/2019/vue-mixing-sass-with-scss-with-vuetify-as-an-example/

Vue – Mixing SASS with SCSS, with Vuetify as an Example

https://juejin.im/post/5d6ba287e51d453b5e465b80

Webpack中loader打包各种文件

https://www.cnblogs.com/wangpenghui522/p/5467560.html

[专栏]基于 vue+go 如何快速进行业务迭代?

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开发微信小程序怎么配置域名?

    小程序对域名无要求,只对 SSL 证书有要求,因为非实时通讯协议要求是 HTTPS,而非 HTTP。域名可以随便注册一个便宜的,如果在国内上架,需要备案。但现在...

    李艺
  • 10.13 如何使用transform样式?

    matrix3D是3D变换,是4*4的矩阵。matrix是2D变换,是3*3矩阵。

    李艺
  • 什么代码会遭人耻笑,什么妹子会受人喜欢?从妹子角度戏说代码优劣。

    在日常生活中,丑姑娘和好姑娘一眼就能识别;在代码中,好代码与坏代码却不容易觉察,这里面有标准,但每个程序员都觉得自己创造的代码好。了解这些标准,可以有效避免写出...

    李艺
  • (11/24) css进阶:Less文件的打包和分离

    写在前面:在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。

    wfaceboss
  • 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 ? 经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,w...

    iKcamp
  • 我已经会手写没用的loader了

    webpack的loader配置应该谁都会,讲道理,我们会使用loader,会配置loader就够了。今天只是了解loader的基本概念和基本的运行原理,了解了...

    wade
  • webpack实战——样式预处理

    在目前的前端项目中,经常可以看到使用SASS和LESS来对CSS进行处理,那么在webpack中如何配置?

    流眸
  • webpack实战——预处理器(loader)【下篇】

    在上一篇中根据一切皆模块的思想,学习了解了loader:概述、引入、配置及使用。本篇接着上篇的话题,讲述常用loader。

    流眸
  • webpack4.0各个击破(6)—— Loader篇

    loader是webpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例...

    大史不说话
  • webpack中的loader

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(t...

    刘亦枫

扫码关注云+社区

领取腾讯云代金券