(掌握)webpack的css处理和loader的使用

(掌握)webpack的css处理和loader的使用

编写案例代码

• 我们创建一个component.js

  • 通过JavaScript创建了一个元素，并且希望给它设置一些样式；

    import "../css/stype.css";
    //之所以可以不用写from，是因为我们并不使用它，而是将css导入我们的依赖图中
    

继续编译命令 npm run build

css-loader的使用

• 上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？

  • loader 可以用于对模块的源代码进行转换
  • 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
  • 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

• 那么我们需要一个什么样的loader呢？

  • 对于加载css文件来说，我们需要一个可以读取css文件的loader
  • 这个loader最常用的是css-loader

  //这些loader都是在webpack配置文件(webpack.config.js)里的module的rules
  //可以在里面写上匹配.vue的文件就使用vue-loader去处理
  //css，ts，tsx都是这样子处理的(这就是webpack的强大之处，不断的集成。也是loader的本质)
  

• css-loader的安装：

npm install css-loader -D

css-loader的使用方案

• 如何使用这个loader来加载css文件呢？有三种方式：

  • 内联方式；
  • CLI方式（webpack5中不再使用）
  • 配置方式

• 内联方式：内联方式使用较少，因为不方便管理

  • 在引入的样式前加上使用的loader，并且使用!分割

  import "css-loader!../css/style.css"//一般也不采用
  

• CLI方式

  • 在webpack5的文档中已经没有了**–module-bind**
  • 实际应用中也比较少使用，因为不方便管理(淘汰了)

loader配置方式

• 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：

  • module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）
  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览

• module.rules的配置如下：

• rules属性对应的值是一个数组：[Rule]

• 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：

  • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式

  • use属性：对应的值时一个数组：[UseEntry]

    • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

      1. loader：必须有一个 loader属性，对应的值是一个字符串
      2. options：可选的属性，值是一个字符串或者对象，值会被传入到loader中
      3. query：目前已经使用options来替代

      传递字符串（如：use: [ ‘style-loader’ ]）是 loader 属性的简写方式(如：use: [ { loader: ‘style-loader’} ])

  • loader属性： Rule.use: [ { loader } ] 的简写。

Loader的配置代码

//webpack.config.js文件继续深入(将去掉之前写过的注释，强调现有的注释)

const path = require('path')

//导出配置信息
module.exports = {
    entry:"./src/main.js",
    output:{
        filename:"bundle.js"
        path:path.resolve(__dirname,"./build")
    },
    module:{//模块配置:
        rules:[//规则很多，所以是数组类型里用对象用来存放
            //{},{},{}用来存放多种类型的loader
            {
                //告诉webpack，我们要匹配什么文件
                test:/\.css$/ //这里填入的是正则，用来匹配我们的后缀文件
                //use中多个loader的使用顺序是从后往前的
                use:[//告诉webpack用什么loader来处理，为什么用数组，是因为有时候一个loader是处理不完的
                	{loader:"css-loader"}//这时候你需要npm下载css-loader -D，在开发的时候才会用到
                ]
            }
        ]
    }
}

认识style-loader

• 我们已经可以通过css-loader来加载css文件了
  • 但是你会发现这个css在我们的代码中并没有生效（页面没有效果）
• 这是为什么呢？
  • 因为css-loader只是负责将**.css文件进行解析**，并不会将解析之后的css插入到页面中
  • 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader
• 安装style-loader：

npm install style-loader -D

配置style-loader

• 那么我们应该如何使用style-loader：
  • 在配置文件中，添加style-loader
  • 注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面

use:[//告诉webpack用什么loader来处理，为什么用数组，是因为有时候一个loader是处理不完的
    {loader:"style-loader"},
    {loader:"css-loader"}//这时候你需要npm下载css-loader -D，在开发的时候才会用到
]

• 重新执行编译npm run build，可以发现打包后的css已经生效了：
  • 当前目前我们的css是通过页内样式的方式添加进来的
  • 后续我们也会讲如何将css抽取到单独的文件中，并且进行压缩等操作