webpack4-处理图片

前言

1.webpack 在处理图片的时候，会涉及一下几个问题：

• 图片的大小问题，比如是否压缩图片，限制图片大小
• 图片引用方式的问题，是用 base64 的格式引用图片，还是用 url 路径引用图片
• 图片路径问题，开发时写的图片路径和发布时的图片路径不同

2. 跟图片路径有关的文件主要有一下几类：

• css 里的 background-image
• html 里的 <img> 标签：模板文件里的 <img> 标签、主页面的 <img> 标签
• js 里引入的 img

3. 常用依赖

• file-loader：在 css 和 html 主页中，相对路径的图片都会被处理，发布到输出目录中
• url-loader：可以替代 file-loader，并且给图片一个 limit 标准，当图片小于 limit 时，使用 base64 的格式引用图片；否则，使用 url 路径引用图片。
• image-webpack-loader：压缩图片。这个用得不算太多，因为前期可以直接让 UI 设计把图片压缩好，像 ps 就可以自动的批量压缩图片。

file-loader 示例

一，安装依赖

npm i -D file-loader

二，file-loader 的配置，详情参考 https://www.webpackjs.com/loa…

{test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'file-loader',
        options: {name:'assets/[name].[ext]',
        }
    }
},

三，图片的引用

1. 主页

<img src="'../../assets/sm.jpg'"/>

2. 模板页，模板页里的 <img> 标签中相对路径的图片不会被 loader 解析，因此需要使用 require 引用图片

<img src="${require('../../assets/sm.jpg')}"/>

3.css

.layer{
  width: 86px;
  height: 59px;
  background-image:url("../../assets/sm.jpg");
}

四，运行 webpack –mode production，图片被输出到指定目录

url-loader 示例

一，安装依赖

npm i -D url-loader

二，url-loader 的配置

{test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {name:'assets/[name].[ext]',
            limit:2048
        }
    }
},

三，图片小于 limit 时，会直接把图片的数据流，即 base64 格式，写入到 <img> 标签或 css 中，如

参考网址：https://www.webpackjs.com/loa…