4. webpack处理图片资源

常用的样式loader

file-loader：可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片。
url-loader：功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
html-loader：处理html中的img，结合url-loader可以将html中的img的路径正确打包
注意点：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，解析时会出现图片路径变为 [object Module]，解决方法，关闭url-loader的es6模块化，使用commonjs解析。

一般图片小于8k-12k都可以使用url-loader处理成base64的图片。url-loader基于file-loader。

当图片大于自己设定limit的值时会自动交给file-loader处理。

将图片使用base64处理的优点是减少请求数量(减轻服务器压力)，缺点是图片的体积会变大(文件请求速度变慢)

为什么html文件还需要html-loader处理：https://blog.csdn.net/logan_LG/article/details/82082442

安装 url-loader，file-loader, html-loader

npm i url-loader file-loader html-loader -D

新建base.css文件，其中vue.jpg为5KB

.angular{
      
      
	width: 400px;
    height: 400px;
    background: url(./imgs/angular.jpg) no-repeat center;
}
.react{
      
      
	width: 400px;
	height: 400px;
    background: url(./imgs/react.png) no-repeat center;
}
.vue{
      
      
	width: 400px;
    height: 400px;
    background: url(./imgs/vue.jpg) no-repeat center;
}

在入口文件(src/index.js)文件夹中引入base.css文件
```
import './base.css'
```

在src目录下创建index.html文件作为html-webpack-plugin的模板文件。

<div class="angular"></div>
<div class="react"></div>
<div class="vue"></div>
<img src="./imgs/angular.jpg" alt="">
<!-- 被处理成base64 -->
<img src="./imgs/vue.jpg" alt="">

在webpack配置文件webpack.config.js中设置

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
      
      
    mode: 'development',
    entry: './src/index.js',
    output: {
      
      
        filename: 'built.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
      
      
        rules: [{
      
       //处理css文件
                test: /\.css$/,
                //多个loader使用use加载,单个使用loader
                use: ['style-loader', 'css-loader']
            },
            {
      
       //处理css/less等文件中的图片
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options: {
      
      
                    //当图片小于8KB时，用url-loader处理,否则用file-loader处理
                    //配置过url-loader后就不用配置file-loader
                    limit: 8 * 1024,
                    name: '[hash:8].[ext]'
                    //如果html中的图片路径变为[object Module],则开启下边配置
                    //esModule: false
                }
            },
            {
      
      
                test: /\.html$/,
                //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
      
      
            template: './src/index.html'
        })
    ]
}

4. webpack处理图片资源

猜你喜欢