学习webpack(二)：loader的介绍和使用

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

loader是什么？

简单来说，就是对模块的源代码进行解析，转换成浏览器能够认识的代码

一、处理css部分

css-loader

可以将css文件看成是一个模块。是需要通过import来加载这个模块的

在加载这个模块的时候，webpack不知道如何对其加载，所以制定对应的loader来完成这个功能

安装：

npm install css-loader -D

那么如何配置loader呢？在哪里配置loader呢？

loader的配置方式

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

• module.rules中允许我们配置多个loader
• 这种方式可以更好的配置loader，也可以清晰的看出使用哪些loader

module.rules的配置规则如下

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

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

  • test属性： 对资源进行匹配，一般是用正则的方式

  • use属性: 对应的值是一个数组： [ useEntry ]

    1. useEntry是一个对象，可以通过对象来设置其他的属性
    2. loader: 必选参数 对应的是一个字符串
    3. options: 可选参数 值是一个字符串或者对象，会被传入到loader中

    use: [ {loader: 'css-loader'} ]
    //语法糖
    use：['css-loader']
    

  • loader属性: Rule.use[{loader}] 的缩写

代码演示（以css-loader为例）：

module.exports = {
    //入口文件 （可以修改地址）
    entry: './src/index.js',
    //打包的出口文件
    output: {
        //打包的路径
        path: path.resolve(__dirname, './build'),
        //打包过后的文件名
        filename: 'build.js'
    },
    //loader配置模块
    module: {
        //配置规则
        rules: [
            {
                test: /\.css$/,
                //loader: 'css-loader'    //写法一
                //use: ['css-loader']     //写法二 (推荐)
        		use: [                  //完整写法
                    { loader: 'css-loader' }
                ]   
            }
        ]
    }
}

style-loader

在上面的我们已经配置了css-loader，但是在实际的效果中是没有生效的

原因：

• css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中
• 如果希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader

安装：

npm install style-loader -D

配置style-loader

注意：loader的执行顺序是从右向左，所以需要经style-loader写到css-loader的前面

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

less-loader

安装：

npm install less -D
npm install less-loader -D

module: {
    rules: [
        {
            test: /\.less$/,
            //先转化成css, 使用css-loader加载，最后用style-loader来添加到页面中
            use: ['style-loader', 'css-loader', 'less-loader']
        }
    ]
}

认识PostCSS工具

• PostCSS是一个通过JavaScript来转成样式的工具
• 这个工具可以帮助我们进行一些css的转化和适配，比如自动添加浏览前缀，css样式的重置

PostCSS内部也是通过各种插件来实现转化的，所以需要安装各种插件来使用

postcss-loader

npm install postcss-loader -D
npm install autoprefixer -D   //需要安装插件，添加浏览器前缀的

module: {
    rules: [
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: 'postcss-loader',
                options: {
                    //可以提出一个单独的文件
                    postcssOptions: {
                        plugins: [
                            require('autoprefixer')
                        ]
                    }
                }
            }]
        }
    ]
}

当使用postcss-loader的时候，会先查找有不有自己options选项，如果没有就去查找postcss.config.js这个配置文件

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

webpack.config.js

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

postcss-preset-env

• 一个比较强大的postcss插件

• 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill；

• 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）

安装：

npm install postcss-preset-env -D

使用:

跟autoprefixer使用是一样的，可以直接用postcss-preset-env替换autoprefixer

效果也是一样的

二、webpack打包其他资源

file-loader

file-loader的作用就是帮助我们处理import / require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

在使用图片有两种形式，一种是背景图片，另外一种是img标签

//简单创建一个img标签

import image from '../imgs/mode.png'

const el = document.createElement('img')

el.src = image

document.body.appendChild(el)

注意：当使用img标签的时候，我们把图片看成是一个模块，不要直接写成是一个字符串

安装

npm install file-loader -D

使用

//webpack.config.js

module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'
                }
            ]
        }
    ]
}

上面的配置，可以直接展示出图片来了，也就说明加载成功了。

但是还是存在一种不是很友好的现象

打包过后的文件，就直接存在build文件夹中，如果是一张图片还好，如果有很多张图片，就会造成打包文件夹的结构混乱。图片被打包的文件名是32位hash值，我们不能分辨哪张是对应的哪张图片。所以需要进行处理。

所以需要对file-loader进行options配置

常见的配置：

• [ext] 处理文件的扩展名
• [name] 处理文件的名字
• [hash：] 截取hash的长度，默认的32个字符太长了
• [path] 文件相对于webpack配置文件的路径

//重新对file-loader进行配置
module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'，
                    options: {
                        //在打包的文件夹中创建一个images文件夹，用来保存图片的
                        outputPath: 'images',
                        //给图片取名字
                        name: "[name]_[hash:8].[ext]"
               	    }
                }
            ]
        }
    ]
}

效果图：

url-loader

url-loader跟file-loader的工作原理是一样的

url-loader的区别： 就是对图片有限制，对图片较小的进行base64编码

默认情况下： url-loader对所有图片都会进行base64编码

所以会发现，打包过后的文件，就一个build.js，而且里面都还是base64

这也不是我们想要的，只对限制一下的图片，进行base64的转换。

为什么呢？

• 小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程
• 而大的图片也进行转换，反而会影响页面的请求速度

小于100kb的图片，进行转化

{
    test: /\.(jpe?g|png|gif|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    //在打包的文件夹中创建一个images文件夹，用来保存图片的
                    outputPath: 'images',
                    //给图片取名字
                    name: "[name]_[hash:8].[ext]",
                    //配置limit
                    limit: 100 * 1024
                }
            }
        ]
}

认识asset module type

目前webpack的版本为webpack5

• 在webpack5之前，加载这些资源是使用的url-loader file-loader
• 在webpack5开始，可以直接使用资源模块类型(asset module type)，来代替上面的类型

资源模块类型，通过添加模块类型，来代替loader

• asset/resource 发送一个单独的文件并导入URL。代替file-loader
• asset/inline 导出一个资源的data URl。代替使用url-loader
• asset 在导出一个data URI 和 发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现

{
    test: /\.(jpe?g|png|gif|svg)$/,
    type: 'asset',
    // 添加images,存放图片
    generator: {
        filename: 'images/[name]_[hash:8][ext]'
    },
    //限制图片的大小，小的进行转化   
    parser: {
       dataUrlCondition: {
           maxSize: 100 * 1024
       }
   }
}