31 使用url-loader加载图片和字体资源

url-loader

默认情况下，webpack无法处理css文件中的url地址，不论是图片还是字体库，所以要使用url-loader进行加载。

图片

1 本地安装

npm i url-loader file-loader -D

2 修改webpack.config.js

module: {
    rules: [
      // 第三方模块正则匹配规则
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]" }
    ]
  }

参数limit给定的值是图片大小，单位是字节，如果图片大小小于limit时即采用base64编码，大于或等于limit时，不会转为base64。

参数name=[name].[ext]意思是不对图片名字和后缀做改变。

参数[hash:8]指的是取图片hash值的前8位。

字体

1 修改webpack.config.js

module: {
    rules: [
      // 第三方模块正则匹配规则
      { test: /\.(ttf|eot|svg|woff|woff2s)$/, use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]" }
    ]
  }