05.webpack -加载图片和字体的loader和配置

同样的我们在项目中使用图片的不同格式或者字体进行打包时候,如果我们不下载支持器是会报错无法打包完成的.

webpack-图片&字体

1. npm install file-loader url-loader --save-dev

   url-loader封装了file-loader

   可以添加对图片资源或者图标资源的支持

2.配置

{
    // png|jpg|gif:常见的图片资源
    // eot|svg|ttf|woff:字体图标或web字体的字体源文件
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
            limit: 50000
        }
    }]
}