三、__webpack中的loader
    1、loader概述
    image.png
    2、loader的调用过程
    image.png
    3.打包处理css文件
    ①运行npm i style-loader@3.0.0 css-loader@5.2.6 -D
    ②在webpack.config.js的module->rules数组中，添加loader规则如下：

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

    注意：

    image.png

    4.打包处理less文件
    ①运行npm i less-loader@10.0.1 less@4.1.1 -D
    ②在webpack.config.js的module->rules数组中，添加loader规则如下
    image.png

    5.打包处理样式表中与url路径相关的文件
    ①运行npm i url-loader@4.1.1 file-loader@6.2.0 -D
    ②在webpack.config.js的module->rules数组中，添加loader规则如下：
    image.png
    其中？之后的是loader的参数项：

    • limit用来指定图片的大小，单位的字节（byte）
    • 只有<=limit大小的图片，才会被转为base64格式的图片

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

    6.1安装babel-loader 相关的包
    运行 如下的命令 安装对应的依赖包：
    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规则如下：
    image.png
    image.png
    注意 这里
    排除node_modules目录里的js文件，第三方包中有js兼容性 不需要关心

    6.2 配置babel-loader
    在项目根目录下，创建名为babel.config.js的配置文件，定义 Babel的配置项如下：
    module.exports={
    //声明babel可用的插件
    plugins：[['@babel/plugin-proposal-decorators',{ legacy:true }]]
    }
    image.png