Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门

目录

一、CSS-Loader

为什么需要loader

css-loader的使用

二、style-loader的使用

三、browserslitrc工作流程

通过.browserslistrc配置文件进行筛选

四、postcss工作流程

五、Postcss-loader处理兼容

postcss预设

给postcss添加配置文件 

六、importLoaders属性 


大家好,这里是小杰这是webpack相关学习的第二期,如果你没有看过第一期的话我强烈建议你先看完第一期的内容,这是链接:webpack5学习第一期,因为在第二期中我们的项目沿用第一期的,下面让我们一起由浅入深探索一下webpack的世界吧!✌️

一、CSS-Loader

为什么需要loader

我们还是用webpack第一篇里的webpack初体验项目,下面是我们的项目目录结构:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第1张图片

我们创建一个login.js文件,在里面先创建dom标签,然后再把它放在界面上进行展示,之后再去给相应的元素添加样式,然后再通过webpack做一个统一的打包,之后输出到一个静态资源上去,为我们所用进行部署。

下面我们一步步地实现:

我们在 login.js 文件中 创建一个 login 函数,在里面创建一个 h2 标签,给他一段文本,然后设置一下类名,有了这样的一个函数以后,将来肯定会被别人所调用,这样就我们就需要返回一下在函数执行中创建的 h2 标签。最后调用 login 函数把标签添加到 body 当中。

function login() {
    const oH2 = document.createElement('h2')
    oH2.innerHTML = '小杰学前端'
    oH2.className = 'title'
    return oH2
}
document.body.appendChild(login())

将login.js文件导入到入口文件index.js中:

import './js/login'

命令行执行 npm run build 进行打包:

目录里生成dist文件夹,里面的build.js就是我们打包后的文件

在index.html里引入打包后的文件:

在浏览器中运行,看看效果:

可以看到我们在 login.js 文件夹下通过 login 函数添加的 h2 标签在我们页面里成功显示出来了

下一步我们就要给这个标签添加一个样式

先在src目录下新建一个css文件夹,在里面创建一个login.css文件来写标签的样式

我们先给标签添加样式:

.title {
    color: red;
}

思考一下,如果我们再次进行打包,浏览器会显示添加样式后的标签吗? 

很明显,页面不会有任何变化,因为我们根本没有把css文件引入依赖图中。依据我们的设计,login.css 属于组件 login.js 里的样式,所以我们应该在 login.js里导入 login.css 文件,这样我们的入口文件会先去找 login.js,login.js 再去找 login.css。这样打包就可以完成了。

这样css文件就需要把它当成一个模块去处理才能有导入导出的行为,那么我们就在login.js文件中引入login.css:

import '../css/login.css'

运行 npm run build 看看是否打包成功:

为什么会报错?

因为默认情况下,webpack是不会处理css文件的,因为他并不是一个js模块,这样我们就需要有人能够给这个css文件做一个转换,然后让webpack可以拿着转换后的内容去执行打包操作。这样的话就需要loader了,它的功能就是做这样一个转换。

loader是什么?

当前的话,我们只需要记住两点,loader是必须的,并且它可以起到转换的作用。

css-loader的使用

首先安装css-loader:

npm i css-loader -D

安装完css-loader后,我们执行打包会成功吗?

答案还是不会的,因为css-loader还得在webpack中进行相应的配置才能工作。

行内loader的使用: 

修改login.css里导入login.css文件这行代码,给他加上loader

import 'css-loader!../css/login.css'

这句话的意思就是css-loader会对这个路径的css文件进行处理,如果有多个loader,就用感叹号进行分割就行。

引入css-loader后,再次执行打包会成功吗?

在通过npm run build执行完毕后,并没有报错,我们打开浏览器运行发现样式并没有成功引入进来

因为css-loader只是将我们的css语法处理为当前js可以识别的模块类型,但是它并不能把样式放在界面上进行使用。如果页面上的元素要想具备样式,那要么我们写了style标签,要么写了行内style属性,要么通过link引入外部css文件。但是上述三种行为css-loader都是做不到的,因此我们想在页面上看到具体的样式变化,就需要另一种loader。

这里我们先不去说明另一种loader,因为在行内这样写是非常麻烦的,如果还有个index.css也需要在他前面加上css-loader,这样文件多了就非常麻烦,下面我们就看一下在配置文件中如何使用css-loader,注意把login.js的引入恢复到原来的状态:

import '../css/login.css'

module就是一个对象,里面来放具体的匹配规则,rules就是在相应规则下需要添加的属性和属性值,test一般就是一个正则表达式,用于匹配我们所需要处理的文件类型,use属性来告知webpack使用什么样的loader,下面以一种最全的loader的配置参数的书写方式,这里把webpack.config.js里的代码都粘出来:

const path = require('path')

module.exports = {
    entry:'./src/index.js',
    output: {
        filename:'build.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

因为 ' . '有特殊含义,所以加个转义符,因为我们希望它以 ' .css '结尾,所以在后面加了一个$符号。这样的话webpack看到 .css 结尾的文件时,就可以去用他下边所给定的loader了。在user里,除了loader,还有个options属性,它是可选的,用来添加参数。

下面我们执行 npm ren build,发现并没有报错,dist目录下生成了打包后的文件build.js,这样我们就学会了如何在配置文件中对css-loader进行配置

下面我们再一个简写方法:

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['css-loader']
            }
        ]
    }

这样的执行结果和上里的结果相同,只是简单了一些。

二、style-loader的使用

css-loader只是让webpack去识别css语法,而并不能把样式放在界面上进行使用,这个活css-loader做不了。所以需要另一个loader,style-loader。

首先安装style-loader:

 npm i style-loader -D

在配置文件中添加style-loader:

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

注意:loader在执行的时候会从右往左或者从下往上执行。很明显我们想让css-loader处理css,再把处理的结果给style-loader去处理,这样我们才能在页面上看到样式。

查看结果,运行index.html文件:

这样我们的样式成功添加进来了,并且style-loader会生成一个style标签,然后把样式添加进来

三、browserslitrc工作流程

我们做前端开发基于工程化,我们有个需求就是要实现css和js的兼容问题,怎么去实现兼容呢,我们有一些工具来帮助我们,比如说babel,postcss等等,但是这些工具去工作总要有一些条件,我们得告诉这些工具,我们要兼容的都有哪些平台,根据相应的条件来进行筛选,然后再去做到兼容就可以了。

首先我们在项目目录下找到node_modules文件夹,找到里面的browserslist文件夹,在他的入口文件index.js里第二行有个caniuse-lite:

他就会帮我们向can i use网站发送请求,根据我们的条件进行筛选,把删选后的网站返回给我们。

下面进行一下演示:

npx browserslist

在命令行运行上面的代码,会根据默认条件返回一些浏览器的数据。

这里他的默认条件是市场占有率大于百分之零点五,然后没有死掉的浏览器。如果24个月这个浏览器没更新,那他们就相当于死掉了。

在package.json中自定义筛选条件

在package.json中添加下面的语句:

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

这里的意思就是筛选市场占有率大于百分之1,是最新的两个版本,且没有最近一年不更新的浏览器

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第2张图片

在上面他就把满足条件的浏览器都筛选出来了

通过.browserslistrc配置文件进行筛选

这里我们不用在package.json中进行设置了,先把相应的代码删除掉,然后在目录下新建一个.borwserslistrc文件,把需要配置的条件写在这里,然后运行 npx browserslist就行。

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第3张图片

四、postcss工作流程

postcss是一种javascript转换样式的工具

首先安装postcss:

npm i postcss -D

我们利用postcss可以做一些兼容性的操作,比如说给不同的样式针对浏览器添加前缀,或者做一些css样式的重置处理,这些都可以借助postcss以及它的一些插件来完成。

为了能在命令行中使用postcss,我们还得安装一下它的脚手架:

npm i postcss-cli -D

在css目录下新建test.css,看看postcss到底是怎么工作的,为了方便演示兼容性,我们随便写一些代码:

.title {
    display: grid;
    transition: all 0.5s;
    user-select: none;
}

在login.js中把这个样式引入:

import '../css/test.css'

执行npm run build进行打包,运行浏览器看看样式效果:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第4张图片

但是样式前面并没有添加上兼容前缀,那为啥我们之前配置的browserslistrc文件没有生效呢,那我们只能借助postcss来对样式手动处理一下。

我们现在想做的事情就是给transiton和user-select依据我们在browserslistrc里设置好的条件对不同浏览器平台添加相应的前缀,这个时候就应该把加前缀的插件给拿进来。

安装加前缀的插件:

 npm i autoprefixer -D

我们现在安装了很多东西,有的小伙伴可能有点懵,我们来做个简单的整理:

postcss相当于一个整体的工具,类似于一个解析器,但是它自己啥事也干不了,于是我们又安装了一个autoprefixer,它就相当于一个具体的功能,来给样式属性做一个前缀的添加,因为我们想在命令行直接使用postcss命令,默认情况下他不允许像npx browserslist这样去用,所以我们又装了个postcss-cli这样的脚手架。

执行 npx postcss --use autoprefixer -o ret.css ./src/css/test.css :

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

这里的意思是,通过npx执行postcss命令,--use的意思是使用这个插件,-o ret.css就是输出到ret.css这个文件,后面的路径就是对这个css文件进行操作。

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第5张图片 

我们看看输出的ret.css文件,前面就多了很多兼容性的前缀。

我们在.browserslistrc文件里修改市场占有率为百分之零点零一,看看ret.css里前缀是否有相应的添加:

这是修改后的.browserslistrc文件:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第6张图片

再次执行npx postcss --use autoprefixer -o ret.css ./src/css/test.css ,看看ret.css里的内容:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第7张图片

可以看到里面的前缀就变多了,这样我们就很轻松的实现了兼容。


五、Postcss-loader处理兼容

如果我们的项目里有很多的css文件都需要进行兼容性处理,那我们不可能像上一节那样在命令行里手动用postcss实现这个事情,这样我们就需要postcss-loader:

先安装postcss-loader:

npm i postcss-loader -D

在webpack.config.js中加入post-loader:

postcss要先把css代码做一些兼容性处理,所以应该在css-loader之前进行工作,再把处理好的css给css-loader,然后再交给style-loader,是这样的顺序。

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader','postcss-loader']
            }
        ]
    }

加完之后进行打包的话,样式还是不会多相应的前缀,因为postcss-loader是处理postcss的,但是在上一节我们知道postcss啥也干不了,需要依赖插件,这样就需要给postcss-loader添加相应的参数了:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                'style-loader',
                'css-loader',
                {
                  loader: 'postcss-loader',
                  options: {
                      postcssOptions:{
                          plugins: [
                              require('autoprefixer')
                          ]
                      }
                  }
                }
              ]
            }
        ]
    }

这里options就是postcss-loader的参数,里面plugins就是依赖的插件。

执行 npm run build,运行浏览器查看效果:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第8张图片

现在我们的样式都是经过兼容性处理的了,如果我们想修改一下兼容条件,直接在.browserslistrc里改就行了。

postcss预设

现在我们修改一下字体颜色,把它设置为16进制的 #123456,看看效果:

 我们再把颜色修改为 #12345678 看看效果:

那我们就有疑问了,正常颜色十六进制不是就六个数么,怎么8个数也能运行成功,因为后面的两个数就相当于给字体添加了 rgba 操作。问题是谷歌浏览器是可以兼容这种写法的,但是很多浏览器是不兼容的,只能识别 rgba 这种写法,那很多小伙伴就想说,我们不是安装了 autoprefixer 插件么,显然它是添加样式前缀的,做不了这种转换,这里我们要介绍的就是 postcss 预设,postcss-preset-env,那预设到底是啥意思呢,它就相当于是插件的集合,有了它我们甚至不需要autoprefixer了,因为都被预设给包括在内了。 

安装 postcss-preset-env:

npm i postcss-preset-env -D

执行npm run build重新进行打包,在浏览器中运行查看结果:

在样式中,颜色从八位16进制数转换成了rgba 这样就能兼容其他的浏览器了。

给postcss添加配置文件 

如果我们都在webpack.config.js里配置的话代码显得有些乱,如果项目里有less文件的话,为了处理less文件。还得在webpack.config.js里再配置一遍,这样代码也非常冗余。我们同样可以把冗余的代码拿出来,放在postcss.config.js这个专门的配置文件当中。

这样我们就先重新修改一下webpack.config.js :

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader','postcss-loader']
            }
        ]
    }

在postcss.config.js配置文件中我们添加这些就行:

module.exports = {
    plugins: [
        require('postcss-preset-env')
    ]
}

执行 npm run build ,运行浏览器查看效果:

颜色根据配置文件的预设转换为了rgba的形式,那这样实现了代码的复用,简便了我们的操作。

六、importLoaders属性 

现在我们项目的css目录下有两个css文件:

Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第9张图片

这是test.css里的内容:

.title {
  transition: all 0.5s;
  user-select: none;
}

这是login.css里的内容:

.title {
    color: #12345678;
}

我们通过import把test.css中的内容引入到 login.css中:

@import './test.css';
.title {
    color: #12345678;
}

执行 npm run build 进行打包,打开浏览器查看样式:

我们可以看到样式里的兼容性前缀没了,这是为什么呢?

  • 首先login.css @import语句导入了test.css
  • login.css可以被匹配,当它被匹配到之后就是postcss-loader进行工作
  • 基于当前的代码,postcss-loader 拿到了login.css当中的代码之后分析基于我们的筛选条件并不需做额外的处理
  • 最终就将代码直接教给了css-loader
  • 此时 css-loader是可以处理@import media url...,这个时候它又拿到了test.css文件,但是loader 不会回头找postcss-loader处理兼容。
  • 最终将处理好的css代码交给style-loader进行展示

对css-loader添加属性:

因为loader不能回头找,所以我们得给他添加参数,让他能够回头找。来到webpack.config.js文件中对css-loader进行属性的添加:

 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders:1
                        }
                    },
                    'postcss-loader'
                ]
            }
        ]
    }

我们在这里就多设置了一个importLoaders,把它设置为了1,1就是让css-loader可以往回再找一个loader,那如果第一个执行的不是postcss-loader还有一个别的loader,我们想让css文件被这两个loader都处理怎么办呢,很简单,设置为2就行了。

执行 npm run build ,打开浏览器查看样式:

 Webpack5快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门_第10张图片

现在我们的样式就能够成功添加兼容前缀了。

你可能感兴趣的:(webpack,javascript,webpack,前端)