webpack(二)——css-loader,style-loader,less-loader,postcss-loader

本文主要是介绍webpack(二)——css-loader,style-loader,less-loader,postcss-loader，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. css-loader

在js文件夹下新建component.js

function component() {
    const element = document.createElement("div");
    
    element.innerHTML = ["hello", "webpack"].join(" ");
    element.className = "content";
    
    return element;
}

document.body.appendChild(component())

在页面上增加了html元素

给元素增加样式

在src下创建css文件夹，创建index.css

我们需要在component.js创建的组件上引入样式，如果直接import会报错，那么我们如何引入呢？

引入css-loder
1. loader是什么？
  - loader可以用于对模块的源代码进行转换
  - 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
  - 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能
2. 我们需要什么loader来加载？
  - 需要一个可以读取css文件的loader
  - 最常用的就是css-loader
3. 如何安装css-loader？
```
npm install css-loader --save-dev
npm install css-loader -D
```
css-loader的使用方案
1. 内联方式
  
  在component中引入
```
import "css-loader!../css/index.css"
```
2. cli方式(现在不支持了)
  
  在package.json上配置
```
"scripts": {
    "build": "webpack --module-bind 'css-loader' --config webpack.config.js"
  }
```
3. 配置方式（最常用）
  
  在webpack.config.js
```
// 配置loader的结构
module:{
    rules: [**这里要放rule对象**]
}
```
  rules中
  - test属性：用于对resource进行匹配，通常会设置成正则表达式
  - use属性：对应的值是一个数组，[UseEntry],
    - UseEntry是一个对象,可以通过对象的属性来设置
      - loader:必须有一个loader属性，对应的值是一个字符串
      - options：可选属性，值是字符串或者对象，值会被传入loader
      - query：目前已经使用options替代
      - {loader:"css-loader" 可以简写成 "css-loader"
  正确的配置：
```
module.exports = {
   module:{
    rules: [
        {
             // 规则使用正则表达式
            test: /\.css$/,  // 这里是匹配资源
            use:[{
                loader: "css-loader"
            }]
        }
   ]
}
```
没有在页面上出现？因为没有作用到页面上，怎么办？

分析插入样式的方式：
- 行内样式，在元素标签内写，没有
- 页内样式，增加style标签，没有
- 外部样式，link，没有
css-loader只是编译了css文件，但是没有插入样式的功能，所以需要引入另一个loader

2. style-loader

安装
```
npm i style-loader -D
```

应用

注意loader的顺序，从后往前执行，需要先执行css-loader，写在后面

module.exports = {
   module:{
    rules: [
        {
             // 规则使用正则表达式
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader"
            ]
        }
   ]
}

3. 处理less文件

写一个component.less文件，引入component，浏览器不能识别，要转化为css
安装less
```
npm i less -D
```
安装之后发现node_modules的bin下面有个lessc文件
- lessc帮助我们的less文件转义成css
- ```
npx less ./src/css/component.less > component.css
```
- 转译出的文件在src的css下
安装less-loader
```
npm i less-loader -D
```

在webpack.config.js配置

module.exports = {
   module:{
    rules: [
        {
            test: /\.less$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        }
   ]
}

4. postcss-loader

4.1 前置知识

浏览器兼容性

  1. 开发中，浏览器的兼容性问题，我们应该如何去解决和处理？

这里的兼容性是针对不同的浏览器支持的特性，比如css特性，js语法，之间的兼容性
- 有些浏览器不支持某些属性，我们可以加浏览器的前缀->autoprefiexer可以帮忙加前缀
- 但是我们不一定需要加前缀

4.2 browserlist工具

  1. 认识browserlist工具

我们在很多脚手架配置的时候可以看到这样的配置，在browserlist文件下

> 1%  // 市场占有率大于1%
last 2 version
not dead

市场占有率在哪查? can I use网站
我们需要工具来达到我们配置的兼容性条件，可以用browserlist来共享我们的配置，也就是说如果我们在browserlist中配置了兼容市场占有率>1%的浏览器，其他的配置工具知道了，就会自动配置
1. browserlist的编写规则
defaults：browserlist的默认浏览器配置（>0.5%，last 2 version，Firefox ESR，not dead）
5%：通过全局使用情况统计信息选择的浏览器版本。>=,<和<=工作过
5% in US:美国的使用情况，接受两个字母的国家/地区代码
- >5% in alt-AS: 亚洲地区使用情况统计信息。有关区域代码的列表：caniuse-lite/data/regions
>5% in my stats: 使用自定义用法数据
- >5% in browserlist-config-mycompany stats:使用来自自定义使用情况数据：browserlist-config-mycompany/broserslist.stats.json
cover 99.5%:提供覆盖率的最受欢迎的浏览器
- cover 99.5% in US:在美国覆盖率最受欢迎的浏览器
- cover 99.5% in my stats:使用自定义用法数据
dead：24个月没有官方支持或者更新的浏览器，例如：IE 10
last 2 version：每个浏览器的最后2个版本
- last 2 Chrome versions: 最近2个版本的Chorme浏览器
- last 2 major versions 或 last 2 iOS major versions:最近2个主要版本的所有次要/补丁版本
not ie < 8
1. 可以执行以下的命令

npx browserslist ">1%,last 2 version,not dead"

逗号隔开/or分割的话是并集的关系，换行也是并集的关系；交集的关系可以写and

应用browserlist

方法一：在package.json

"browserslist":[
    ">1%",
    "last 2 version",
    "not dead"
]

新建文件 .browserslistrc
```
>1%
last 2 version
not dead
```

4.3 认识postcss工具

什么是PostCSS?
- PostCSS是一个通过JavaScript来转换样式的工具；这是一个独立的工具，不仅仅是在webpack中使用
- 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式
- 但是实现这些功能，我们需要借助PostCSS对应的插件
如何使用PostCSS？
- 第一步：查找PostCSS在构建工具中的扩展，比如webpack的postcss-loader
- 第二步：选择可以添加你需要的PostCSS相关的插件

命令行使用postcss

安装postcss-cli(cli: command line interface命令行接口)

// 这是工具本身
npm install postcss -D
// 这是为了在命令行可以使用它
npm install postcss-cli -D

验证：

安装插件，添加浏览器前缀

npm install autoprefixer -D

新增test.css

/* 这个选择器使用需要加上浏览器前缀 */
:fullscreen {
    
}
.content {
    user-select: none;
    transition: all 2s ease;
}

命令：

npx postcss --use autoprefixer -o result.css ./src/css/test.css

4.4 webpack中使用postcss-loader

安装postcss-loader
```
npm install postcss-loader -D
```
安装postcss-loader的目的：能在webpack中使用postcss

使用：在webpack.config.js配置，需要给postcss配置需要用到的插件

module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader",
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            // 依赖的插件放在这个数组里面
                            plugins:[
                                require("autoprefixer")
                            ]
                        }
                    }
                }
            ]
        }
   ]
}

在浏览器上打开控制台可以看到style标签下的选择器自动加了前缀（根据.browserlisrtc文件中的配置添加）

4.5 postcss-preset-env插件

作用：将现代的css样式转换成大部分浏览器可以识别的css样式（如：八位数的color，最后两位是透明度，需要被转换为rgba）
安装：
```
npm install postcss-preset-env -D
```

使用：在webpack.config.js配置，给postcss配置需要插件

postcss-preset-env中包含autoprefixer，可以只引用postcss-preset-env

可以不用require，直接写插件名字符串，但是不是所有的插件都可以简写，如果插件需要传入参数则一定要require

module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                "css-loader",
                "less-loader",
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            // 依赖的插件放在这个数组里面
                            plugins:[
                                "postcss-preset-env"
                            ]
                        }
                    }
                }
            ]
        }
   ]
}

需要在css文件和less文件中都要使用postcss是否需要两边都配置呢？不需要
- 在webpack中只写“postcss-loader”
- 其他的配置在新建文件postcss.config.js中（这个名字是固定的）
```
module.exports = {
    plugins:[
        require('postcss-preset-env')
        // 'postcss-preset-env'
    ]
}
```

5. css-loader的importLoaders属性

5.1 业务场景

component.js中只引用了index.css,在index.css中引用了test.css

@import "./css/test.css"

此时只有index.css的代码被转换，test.css的代码并没有被转换。

5.2 出现原因

原因是webpack的处理逻辑：js中只是引用了index.css，那么postcss-loader工具只会进入到index.css中去处理代码。而对于index.css来说，@import这一行的代码只会用css-loader来进行处理，并不能返回postcss-loader处理，所以test.css内的代码不能转换成浏览器兼容的代码。

但是我们希望的是，@import的文件也可以被处理好。

5.3 处理方法

在css-loader内增加options对象写上importLoaders属性，后面设置的数字的意义是需要被前面多少个loader处理，这里只需要被postcss-loader作处理所以写1；如果写的值是0，那么跟没写是一样的；如果这是less文件还需要被less-loader处理则需要写上2。（太坑啦，loaders的L是要大写的）

module.exports = {
   module:{
    rules: [
        {
            test: /\.css$/,  // 这里是匹配资源
            use:[
                "style-loader",
                {
                    loader:"css-loader",
                    options:{
                        // 这个数字
                        importLoaders:1
                    }
                }
				"postcss-loader",
                }
            ]
        }
   ]
}

这篇关于webpack(二)——css-loader,style-loader,less-loader,postcss-loader的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS教程