webpack4 处理图片

前言

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

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

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

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

3.常用依赖

• file-loader：在css 和html 主页中，相对路径的图片都会被处理，发布到输出目录中
• url-loader：是对file-loader的封装，因此在安装了file-loader和url-loader 后，在webpack.config.js 中只对url-loader 做配置即可。url-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 file-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...