webpack4+babel7入门到精通(四、图片的加载)

一、使用file-loader加载图片

• 1、安装包

    npm install file-loader -D

• 2、在js中使用

    let src = require('./images/default.jpeg');
    let img = new Image();
    img.src = src;
    document.body.appendChild(img);

• 3、配置规则

    {
        test: /\.(png|jpg|gif|svg|bmp|jpeg)$/,
        use: 'file-loader',
    },

二、在css文件中写背景图片

• 1、样式文件

    #box {
      width: 100px;
      height: 100px;
      border: 2px solid #333;
      background: url('./../images/default.jpeg');
      background-size: cover;
    }

• 2、在webpack.config.js中需要配置

    ...
    {
        test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 5 * 1024, // 指定多大的图片
                    outputPath: 'images', // 指定拷贝文件输出目录
                    publicPath: '../../images/', // 根据webpack根目录跳转到图片路径
                    // name: '[name].[hash:8].[ext]',
                }
            }
        ]
    },
    ...

三、如果要在页面中直接使用图片标签

• 1、安装包

    npm install html-withimg-loader -D

• 2、配置规则

    {
        test: /\.(html|htm)$/,
        use: [
            {
                loader: 'html-withimg-loader',
            }
        ]
    }

• 3、使用

    <img src="./images/default.jpeg" width="200" height="200"/>

四、使用base64处理图片

• 1、file-loader是解析图片地址,把图片从源位置拷贝到目标位置并且修改源引用
• 2、url-loader可以将比较小的文件,直接转换为base64字符串嵌套在页面中

    {
        test: /\.(png|jpg|gif|svg|bmp|jpeg|eot|woff|woff2|ttf)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 5 * 1024, // 指定多大的图片
                    outputPath: 'images/', // 指定拷贝文件输出目录
                }
            }
        ]
    },