webpack4.2-[url-loader]

最新推荐文章于 2023-04-05 14:40:30 发布

Leisure Tea

最新推荐文章于 2023-04-05 14:40:30 发布

阅读量312

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103786508

版权

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

摘要由CSDN通过智能技术生成

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,<