webpack 中的 loader

loader 概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

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

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

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

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

loader 的调用过程

1. webpack 默认只能打包处理.js 结尾的文件，处理不了其它后缀的文件
2. 由于代码中包含了index.css这个文件，因此 webpack默认处理不了
3. 当webpack 发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的loader 加载器。
4. webpack把 index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader) .
5. 当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)
6. 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack
7. webpack 把 style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。
    

 

 打包处理 css 文件

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

 npm i style-loader@3.0.0 css-loader@5.2.6 -D

注意：loader的版本不要使用的太高，高版本的loader在一些情况下可能存在报错，安装的时候注意添加版本号。

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

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

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

注意：

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

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

打包处理 less 文件

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

npm i less-loader@10.0.1 less@4.1.1 -D 

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

module.exports = {
    mode: "development",
 
    // 所有第三方模块的匹配规则
    module: {
        // 文件后缀名的匹配
        rules: [
            // 处理css的loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
        ]
    }
}

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

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

        - file-loader是url-loader的内置依赖项，不需要我们手动配置

npm i url-loader@4.1.1 file-loader@6.2.0 -D

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

module.exports = {
    mode: "development",
 
    // 所有第三方模块的匹配规则
    module: {
        // 文件后缀名的匹配
        rules: [
            // 处理css的loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 处理样式表中与 url 路径相关的文件
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
        ]
    }
}

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

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

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

打包处理 js 文件中的高级语法，安装 babel-loader 相关的包

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

function * fn (target) {
    target.info = '装饰器'
}
@fn
class Person {}
console.log(Person.info);

运行如下的命令安装对应的依赖包：npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

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

 // 处理js中的高级语法
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: [
                    //         ['@babel/preset-env', { targets: "defaults" }]
                    //     ]
                    // }
                }
            }

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
    // 声明bable可以用的插件
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
}

详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators