webpack4.x实战六，处理图片

曾经终败给现在 2022-01-10 07:34 179阅读 0赞

如何处理图片

# 处理图片 #

## 安装插件file-loader ##

执行`npm install --save-dev file-loader`

## 修改src/css/style.less ##

*{
    	padding:0;
    	margin:0;
    }
    body{
    	background-color: #f5f5f5;
    }
    #app{ 
    	width: 200px;
    	height: 200px;
    	background:url(../images/avatar.png);
    	div {
    		width: 100px;
    		height:100px;
    		color:green;
    		border:1px pink solid;
    		transform: translateX(300px);
    	}
    }
    复制代码

## 创建文件夹src/images ##

mkdir src/images
    复制代码

拷贝一张图片放到images文件夹中，名称修改为 avatar.png

## 修改webpack.config.js ##

说明：

{
        test:/\.(png|gif|jpg)$/i,
        use:[
            {
                loader:'file-loader',
                options:{
                    name:'images/[name].[ext]', //图片名称
                    publicPath:'../' //相对于当前引入的文件的路径，这里指src/css/style.less文件
                }
            }
        ]
    }
    复制代码

执行打包命令 `npm run webpack`

dist目录结构

dist
    ├── css
    │   └── main-5f37473804ea25bf9f09.css
    ├── images
    │   └── avatar.png
    ├── index.html
    └── js
        └── main-5f37473804ea25bf9f09.js
    复制代码

访问dist/index.html

浏览器效果

**思考：如何优化图片打包，使用base64编码**

# 使用url-floader，优化图片打包 #

## 插件安装url-floader ##

npm install url-floader --save-dev
    复制代码

## 修改webpack.config.js ##

说明： `limit:20000`:图片大于20000byte 使用文件(file-loader)，小于20000byte使用base64

执行打包命令 `npm run webpack`

dist目录结构

dist
    ├── css
    │   └── main-14de64958860a5cb4e2a.css
    ├── index.html
    └── js
        └── main-14de64958860a5cb4e2a.js
    复制代码

打开 main-14de64958860a5cb4e2a.css文件，图片已经被处理为base64

访问dist/index.html

浏览器效果

# 总结 #

## file-loader ##

插件`npm install --save-dev file-loader`

添加rules规则

{
        test:/\.(png|gif|jpg)$/i,
        use:[
            {
                loader:'file-loader',
                options:{
                    name:'images/[name].[ext]', //图片名称
                    publicPath:'../' //相对于当前引入的文件的路径
                }
            }
        ]
    }
    复制代码

## url-loader ##

插件`npm install --save-dev file-loader`

添加rules规则

{
        test:/\.(png|gif|jpg)$/i,
        use:[
            {
                loader:'url-loader',
                options:{
                    name:'images/[name].[ext]', //图片名称
                    limit:20000, //图片大于20000byte 使用文件(file-loader)，小于20000byte使用base64
                    publicPath:'../' //相对于当前引入的文件的路径
                }
            }
        ]
    }
    复制代码

**思考：生产模式下，css文件和js文件越小越好，因此需要压缩；开发模式，css文件和js文件，则不需要压缩；怎么分开打包区分两种模式呢？**

**请看[webpack4.x实战七，生产模式和开发模式分开打包][webpack4.x]**

转载于:https://juejin.im/post/5cd6fe7af265da03ae74e038

[webpack4.x]: https://juejin.im/post/5cd9621ce51d453aa10dff6d