前端工程化---webpack中的loader

webpack 中的 loader

1. loader 概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，

webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

• css-loader 可以打包处理 .css 相关的文件

• less-loader 可以打包处理 .less 相关的文件

• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

2. loader 的调用过程

3. 打包处理 css 文件

① 运行 npm i style-loader@2.0.0 css-loader@5.0.1 -D 命令，安装处理 css 文件的 loader

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {  // 所有第三方文件模块的匹配规则
    rules:[ // 文件后缀名的匹配规则
        { test: /\.css, use: ['style-loader','css-loader'] }
    ]
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

• use 数组中指定的 loader 顺序是固定的

• 多个 loader 的调用顺序是：从后往前调用

4. 打包处理 less 文件

① 运行 npm i less-loader@7.1.0 less@3.12.2 -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [ // 文件后缀名的匹配规则
        { test: /\.less$/,use: ['style-loader','css-loader','less-loader'] },
    ]
}

5. 打包处理样式表中与 url 路径相关的文件

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [ // 文件后缀名的匹配规则
        { test: /\.jpg|png|gif$/,use: ['url-loader?limit = 22229'] },
    ]
}

其中 ? 之后的是 loader 的参数项：

• limit 用来指定图片的大小，单位是字节（byte）

• 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

5.1 loader 的另一种配置方式

带参数项的 loader 还可以通过对象的方式进行配置：

module: {
    rules: [ // 文件后缀名的匹配规则 
        { test: /\.jpg|png|gif$/, // 匹配图片文件
         use: {
             loader： 'url-loader', // 通过 loader 属性指定要调用的 loader
             options:{    // 通过 options 属性指定参数项
                limit : 22229
            }
         }
    ]
}

6. 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

class Person {
    // 通过 static 关键字，为 Person 类定义了一个静态属性 info 
    // webpack 无法打包处理“静态属性”这个高级语法
    static info = 'person info'
}
​
console.log(Person.info)

6.1 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-properties@7.12.1 -D

包的名称及版本号列表如下（前面是包的名称、@后面是包的版本号）：

• babel-loader@8.2.1

• @babel/core@7.12.3

• @babel/plugin-proposal-class-properties@7.12.1

6.2 配置 babel-loader

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

{
    test: /\.js$/,
        // exclude 为排除项，
        // babel-loader 只需处理开发者编写的 js 文件，不需要处理 node_modules 下的 js 文件
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        option: {   // 参数项
            // 声明一个 babel 插件，此插件用来转化 class 中的高级语法
            plugins: ['@babel/plugin-propossal-class-properties'],
        },
    },
}