loader加载器

一、说明

• loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack的打包能力，对它们进行处理。
• webpack默认只能打包JS文件，也无法处理css文件中的url地址，图片、字体库等url地址。需要手动安装一些合适的第三方loader加载器（否则会报需要合适loader...去处理的错）。
• 在webpack配置文件中（webpack.config.js），新增一个配置节点module，是一个对象；有个rules属性，是个数组；数组中存放了所有第三方文件的匹配和处理规则。
• webpack打包时遇到非JS文件，不会直接报错，而是先去找配置文件module节点，找是否有匹配此文件的规则，有即调用对应loader处理。
• loader调用顺序从后往前，后面处理结果交给前面loader继续处理，最终输出到输出文件。

二、处理 css样式表
1、创建了.css文件，如果直接在html中link标签引入，则会造成二次请求，不推荐。
此时，在main.js项目JS入口文件中导入CSS样式表。

import './css/index.css' 

2、安装
项目根路径，npm i style-loader css-loader -D 本地安装。处理css文件需要安装 style-loader 和 css-loader 。
3、增加匹配规则

module.exports = {
    module:{   //此节点用于配置所有第三方模块加载器
        rules:[   //所有第三方模块的匹配规则
            {
                test:/\.css$/,   //正则
                use:['style-loader','css-loader']   //匹配到则使用这些第三方loader
            }
        ]
    }
}

三、处理less文件
1、在main.js项目JS入口文件中导入less文件。

import './css/index.less'

2、安装
npm i less-loader -D本地安装。此加载器需要依赖less插件npm i less -D（内部依赖，不需要定义到配置文件）。
3、增加匹配规则
less也属于样式，也需要经过style-loader 和 css-loader处理。

module.exports = {
    module:{   //此节点用于配置所有第三方模块加载器
        rules:[   //所有第三方模块的匹配规则
            {
                test:/\.less$/,  
                use:['style-loader','css-loader','less-loader']  
            }
        ]
    }
}

四、处理scss文件
1、在main.js项目JS入口文件中导入less文件。

import './css/index.scss'

2、安装
npm i sass-loader -D本地安装。此加载器需要依赖node-sass，cnpm i node-sass -D（常用cnpm安装，npm很多时候失败，内部依赖，不需要规则配置，npm uninstall node-sass出错先删除）。
3、增加匹配规则
sass也属于样式，也需要经过style-loader 和 css-loader处理。

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

五、处理CSS中的url地址（图片、字体库）
1、css中引入了图片url；npm i boostrap -S安装bootstrap的包（根据提示安装其他依赖），4.x版本icon文件分离出去所以还需要下载open-iconicnpm i https://github.com/iconic/open-iconic.git -D，main.js入口文件引入bootstrap.css（4+还需要引入icon），编译会显示无法处理.ttf等字体文件。

<span class="oi oi-account-login"></span>

//通过路径形式引用node_modules中相关文件，可以省略路径前面node_modules这一层目录
//直接写包的名称，后面跟上具体的文件路径
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

2、安装
npm i url-loader -D本地安装。此加载器需要依赖file-loader，npm i file-loader -D（内部依赖，不需要规则配置）。
3、增加匹配规则

module.exports = {
    module:{   
        rules:[   
           {
               test:/\.(jpg|png|gif|bmp|jpeg)$/,   //匹配图片 
                use:'url-loader'    

            },
           {
                test:/\.(ttf|eot|svg|woff|woff2)$/,   //字体文件  
                use:'url-loader'
            }
        ]
    }
}

处理图片和字体引用url虽然用同样的loader，为了区分，匹配规则最好不要混写。
4、编译打包的图片url是base64格式的字符串。

不需要图片的二次请求，适合小的图片。
引用loader时可传参进行控制（格式和url传参一样，只是参数名称是固定的）。

• 如果是大的图片不需要做转换，

rules:[   
  {
         test:/\.(jpg|png|gif|bmp|jpeg)$/,  
         use:'url-loader?limit=39083'  
   }
]

limit限制参数，以byte为单位。大于图片本身大小，会转为base64字符串；小于等于，不会被转base64。

• 默认图片名字会重命名，是为了防止图片重名。
  name参数，可以设置名字不发生改变。
  use:'url-loader?name=[name].[ext]'
  固定写法，表示文件名字和格式都不变。
  默认图片会在url根目录中。图片名字相同会取后面那张。
  此时为了重名造成问题，可以拼接加上hash值。
  use:'url-loader?name=[hash:8]-[name].[ext]'，即从32位hash值中截取8位。