vue项目 webpack 打包 图片转换

Posted 每天都要进步一点点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目 webpack 打包 图片转换相关的知识,希望对你有一定的参考价值。

1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。

2.大于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]‘
  }
},

.

以上是关于vue项目 webpack 打包 图片转换的主要内容,如果未能解决你的问题,请参考以下文章

vue 之webpack打包工具的使用

webpack一步步实现实时打包打包vue打包csslessscss文件babel用法

[万字逐步详解]使用 webpack 打包 vue 项目(基础生产环境)

vue之webpack打包工具的使用

Webpack前端项目打包配置

vue项目打包后打开页面空白解决办法