使用 url-loader 处理图片（实际工作中推荐）

url-loader 功能类似于 file-loader，

但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL

2.urlloader使用

https://www.webpackjs.com/loaders/url-loader/

2.1安装urlloader

npm install --save-dev url-loader

2.2配置urlloader

优势:

图片比较小的时候直接转换成base64字符串图片, 减少请求次数

图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片

 

url-loader可以直接处理css和js里的img，无法直接处理html中的img

---

前提：在项目的根目录下

1.通过 npm install 命令安装相关包

2.通过 npm install --save-dev url-loader@4.1.0 安装

3.配置 url-loader

limit: 3000--小于3k的图片都会转换为base64格式，大于3k的图片不转换为base64格式

4.通过 npm run webpack 打包文件

效果图：

---

源代码：

index.js

import './index.css';

import img from './img/logo.png';

console.log(img);

const imgEl = document.createElement('img');
imgEl.src = img;

// base64
document.body.appendChild(imgEl);

index.css

body {
  background-color: yellow;
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'img/[name].[ext]',
                        esModule: false,
                        limit: 3000
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
};

package.json

{
    "name": "webpack-url-loader",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "webpack": "webpack"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "css-loader": "^4.1.1",
        "file-loader": "^6.0.0",
        "html-webpack-plugin": "^4.3.0",
        "mini-css-extract-plugin": "^0.9.0",
        "style-loader": "^1.2.1",
        "url-loader": "^4.1.0",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12"
    }
}