使用 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"
    }
}