4. webpack处理图片资源

常用的样式loader

  • file-loader:可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片。

  • url-loader:功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 base64 的 URI。

  • 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

  1. 安装 url-loader,file-loader, html-loader

    npm i url-loader file-loader html-loader -D
    
  2. 新建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;
    }
    
  3. 在入口文件(src/index.js)文件夹中引入base.css文件

    import './base.css'
    
  4. 在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="">
    
  5. 在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: '[name][hash:8].[ext]' //保留原来图片的名字,并加上8位的hash值
                        //如果html中的图片路径变为[object Module],则开启下边配置
                        //esModule: false
                    }
                },
                {
                    test: /\.html$/,
                    //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                    loader: 'html-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    }
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值