vue 开发常用工具及配置六：认识各种 loader
- 2020 年 1 月 14 日
- 笔记
本文大约 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的区别
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 如何快速进行业务迭代？
