一、处理图片文件

默认webpack无法处理css文件中的url地址在打包时会报错无论是图片还是字体库只要是url地址都无法处理

解决方法：

在项目根目录下输入cnpm i url-loader file-loader -D安装url-loader和file-loader(url-loader内部依赖于file-loader)

然后在配置文件webpack.config.js中进行配置loader：

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 所有webpack插件的配置节点
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,"./src/index.html"),
            filename:"index.html"
        })
    ],
    // 配置第三方loader模块
    module:{
        rules:[
            // 第三方模块的匹配规则
            {test:/\.css$/,use:["style-loader","css-loader"]}, // 处理css文件的loader
            {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"} // 处理图片url的loader
        ]
    }
}使用url-loader打包之后 在页面中 默认会将路径以base64编码 减少图片的二次请求

关闭默认的以base64编码：
进行配置：
给url-loader传参 格式和网页url地址传参完全一致 在url-loader后面加问号传递参数即可
属性名：limit
设定一个大小范围 当图片大于或等于给定的limit值(单位byte) 则不将url转换为base64格式 反之进行转换
格式：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=图片大小"}

如何查看图片大小：
右击图片 - 属性

————————————————
版权声明：本文为CSDN博主「Piconjo_Official」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Piconjo/java/article/details/105748444

使用url-loader打包之后在页面中默认会将路径以base64编码减少图片的二次请求

关闭默认的以base64编码：

进行配置：

给url-loader传参格式和网页url地址传参完全一致在url-loader后面加问号传递参数即可

属性名：limit

设定一个大小范围当图片大于或等于给定的limit值(单位byte) 则不将url转换为base64格式反之进行转换

格式：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=图片大小"}

如何查看图片大小：

右击图片 - 属性

注：若图片长度大于三位每三位要以逗号进行分隔

496886要写成496,886

例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886"}

若不进行base64的转换

图片的名称会默认变成一串Hash字符串以防止图片重名

可通过配置不使用默认的改名为Hash字符串：

在url-loader后面加上name=[name].[ext]即可

[name]意为：之前是什么名称打包之后也叫什么名称

[ext]意为：之前是什么后缀名打包之后也叫什么后缀名

例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[name].[ext]"}

否则由于打包后的url引用的直接是文件名.后缀名的格式若有重名的图片即使不在同一个文件夹下

也会出现引入的图片重复

为避免此问题需要将名称改为不重复的

若既要不改文件名又要避免图片重复问题

可配置为：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"}

name=[hash:8]-[name].[ext]的意思是：在图片前面带上32位hash值的前8位中间用短横杠进行连接具体的hash值长度可根据需要设置但不能超过32 因为hash值最大只有32位

二、处理字体文件

在main.js里引入字体文件：

若通过路径的形式引入node_modules中相关的文件可省略node_modules

若不写node_modules 默认会从node_modules里查找

例：

bootstrap.css文件在node_modules/bootstrap/dist/css下

但在引入的时候可以这么写：

import "bootstrap/dist/css/bootstrap.css"

然后同样在webpack.config.js中进行配置即可：

字体文件也是使用url-loader进行处理

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 所有webpack插件的配置节点
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,"./src/index.html"),
            filename:"index.html"
        })
    ],
    // 配置第三方loader模块
    module:{
        rules:[
            // 第三方模块的匹配规则
            {test:/\.css$/,use:["style-loader","css-loader"]},
            {test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"},
            {test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"} // 处理字体文件的loader
        ]
    }
}

玖叶教程网

前端编程开发入门

在Webpack中用url-loader处理图片和字体

一、处理图片文件

解决方法：