Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
图片处理url-loader(webpack5之前的处理方式)
在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片
body{
background: url("../img/test1.png");
}
但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 base64 URI 的 loader。
安装命令如下：
npm install url-loader --save-dev
url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。
接着我们在webpack.config.js中配置url-loader的设置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
此时，如果我们的图片test1.png的大小小于8192k，那么就可以打包成功，但是如果我们的图片大于8192k，此时就需要安装file-loader
安装命令如下：
npm install file-loader --save-dev
然后，在 webpack.config.js 配置中添加 loader。例如：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: "dist/"
}
},
],
},
],
},
};
注意：配置时如果你同时配置了url-loader，一定要把url-loader的配置注释掉
此时如果我们进行打包，打包出来的图片名字是随机的哈希值字符串，例如1b959a13f661bd214696460400b8c8d0.png，如果我们想自定义名字，则需要进行配置option选项，具体参数可以参考官网
资源模块
webpack5之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。
webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。
asset/resource将资源分割为单独的文件，并导出url，就是之前的file-loader的功能.asset/inline将资源导出为dataURL（url(data:)）的形式，之前的url-loader的功能.asset/source将资源导出为源码（source code）. 之前的raw-loader功能.asset自动选择导出为单独文件或者dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit限制实现。
案例
我们这里以assert/inline为例子，进行配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.png/,
type: 'asset/inline'
},
],
},
}
此时，再进行打包，png格式的图片都会被作为 data URI 注入到 bundle 中。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/164848.html原文链接：https://javaforall.net
