webpack——url-loader

 直接书写地址引入图片

 

报错

需要安装额外的第三方加载器

在命令窗口输入  cnpm i url-loader file-loader -D 安装第三方loader加载器

然后在webpack.config.js配置文件中的module属性的rules规则数组中新增加载器匹配规则，由于url-loader内部依赖file-loader，所以不用在use中书写，所以也可不用数组表示。

刷新页面，

然而，查看图片的路径

发现此时的图片经过了base64编码，当我们不需要这样做的时候，可以在rule匹配规则中给loader传入参数（跟url地址传参一样，所有的loader加载器都可使用此方式传递参数）新版本的url-loader使用添加对象属性来设置参数，具体可看此官网，limit表示当图片的字节大小 ，小于200字节的时候才会将其进行base64编码。（也可直接设置limit属性为false关闭base64编码）

保存之后再运行，没有经过base64编码

 

END