0

webpack 打包图片小图片转换成base64,大图片自动转换成网络路径?如何实现?是要写插件吗? 还是先有的loader可以实现

威武 23
2017-08-03 提问
3 个回答
0

已采纳
      // 小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。
      // 大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题.而name也是file-loader的属性. 重复一次 必须安装file-loader
      { 
        test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, 
        loader: 'url-loader',
        query: {
          // 图片大小限制 单位b
          limit: 8192,
          // 生成的文件的存放目录
          name: 'resourse/[name].[ext]'
        }
      },

https://segmentfault.com/a/11... 可以去看看

0

只需要url-loader就可以了

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
  limit为转换的图片限制大小
  
0

小图片是被img-loader打包成base64 大图片是被file-loader 打包在其它目录下 所以建议两个loader都安装

撰写答案

你可能感兴趣的

推广链接