webpack4.2-[url-loader]_npm url-loader 指定版本-优快云博客

本文链接：https://blog.youkuaiyun.com/SevenSongyun/article/details/103786508

本文介绍了webpack4.2中的url-loader的作用，主要用于加载图片和字体文件。详细阐述了使用url-loader的步骤，包括配置webpack.config.js、添加匹配规则。还讨论了url-loader的参数设置，如limit参数可以控制是否将资源转为Base64，以及如何通过name参数保留原始文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack4.2-[url-loader]

一、url-loader有什么用？

用来加载有关url路径的文件（如：图片，字体文件等）

二、步骤

本示例在css中使用url

npm初始化
```
npm init -y
```

安装webpack webpack-cli webpack-dev-server

npm i webpack webpack-cli webpack-dev-server --save-dev

安装html-webpack-plugin jquery
```
npm i html-webpack-plugin jquery -d
```
安装style-loader css-loader url-loader file-loader
注意：url-loader 依赖于 file-loader
```
npm i style-loader css-loader url-loader file-loader -d
```

编写配置文件webpack.config.js

const path = require('path')
const webpack = require('webpack')
const htmlwebpackplugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname, './src/js/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: "index.js"
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlwebpackplugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }
}

在package.json中添加
```
"dev": "webpack-dev-server"
```

编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
</body>
</html>

编写js文件

import $ from 'jquery'
import '../css/index.css'
$(function () {
    $("li:odd").css("color", "pink")
    $("li:even").css("color", "skyblue")
})

编写css文件

div {
    width: 300px;
    height: 200px;
    background: url("../images/QQ图片20190726151126.jpg");
    background-size: cover;
}

接下来要用到url-loader
同其他的loader一样，需要在配置文件中配置loader匹配规则
```
{test: /\.(jpg|png|gif|jpeg)/, use: 'url-loader'}
```
启动
```
npm run dev
```

三、url-loader的一些说明

在步骤中显示出来的图片是经过Base64转码的，如下图所示

若不想让其转为Base64，可以在匹配规则里传递 limit 参数，参数为byte大小，当图片的大小大于等于limit参数时，不会转换为Base64，否则转换为Base64;
传递参数如下图所示：
当图片不转为Base64后，打包生成的图片会自动给定一个hash值的名称。如下图所示

原因：在根目录下可能会有同名不同内容的图片，为了防止重名，所以默认使用了hash值命名文件。
那么问题来了，我就想要原图片的文件名怎么办？
给它传递一个name的参数，传递的值为[name].[ext]，表示[原文件名].[原文件后缀名]。
如下图所示：