Webpack5实战笔记----10.file-loader处理图片

最新推荐文章于 2024-09-10 09:02:43 发布
最新推荐文章于 2024-09-10 09:02:43 发布
阅读量523 收藏
点赞数
分类专栏： webpack5 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62273462/article/details/121092748
版权

问题： 

新建img文件夹放入图片资源。

在js文件夹里新建image.js,内容如下：

function packImg() {
    //创建一个容器
    const oe = document.createElement('div')
        //创建img标签，设置src属性
    const oImg = document.createElement('img')
    //加default是为了兼容webpack5
    oImg.src = require('../img/webpack5.jpg').default
    oe.appendChild(oImg)
    return oe
}

document.body.appendChild(packImg())

在index.js中添加如下命令行导入。

import './js/image.js'

 运行npm run build报错。

问题分析：

 图片并没有打包成功。

解决：

安装file-loader:

npm i file-loader -D

修改webpack.config.js:

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                use: ['file-loader']
            }
        ]
    }
}

注意：

//静态资源加载例如图片加载需要配置路径

publicPath: "./dist/"

命令npm run dev运行得结果如下：

因为图片需要配置大小，所以需要对webpack.config.js与image.js重新配置大小。

image.js如下：

function packImg() {
    //创建一个容器
    const oe = document.createElement('div')
        //创建img标签，设置src属性
    const oImg = document.createElement('img')
//设置宽度
    oImg.width = 400
    oImg.src = require('../img/webpack5.jpg')

    oe.appendChild(oImg)
    return oe
}

document.body.appendChild(packImg())

webpack.config.js如下：

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                // use: ['file-loader']
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false //不转为esModule
                    }
                }]
            }
        ]
    }
}

 设置成功：

 也可以按照如下方式配置：

//image.js
import oImgSrc from '../img/webpack5.jpg'

function packImg() {
    //创建一个容器
    const oe = document.createElement('div')
        //创建img标签，设置src属性
    const oImg = document.createElement('img')
    oImg.width = 700
        // oImg.src = require('../img/webpack5.jpg')
    oImg.src = oImgSrc
    oe.appendChild(oImg)
    return oe
}

document.body.appendChild(packImg())
//webpack.config.js
const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                use: ['file-loader']

            }
        ]
    }
}

方法二：采用background url处理：

在css目录下新建image.css,内容如下：

.bgBox {
    width: 240px;
    height: 310px;
    border: 1px solid orange;
    background-image: url('../img/webpack5.jpg');
}

在image.js里导入

import '../css/img.css'

import oImgSrc from '../img/webpack5.jpg'
import '../css/img.css'

function packImg() {
    //创建一个容器
    const oe = document.createElement('div')
        //创建img标签，设置src属性
    const oImg = document.createElement('img')
    oImg.width = 700
        // oImg.src = require('../img/webpack5.jpg')
    oImg.src = oImgSrc
    oe.appendChild(oImg)

    //创建背景图片
    const obImg = document.createElement('div')
    obImg.className = 'bgBox'
    oe.appendChild(obImg)

    return oe
}

document.body.appendChild(packImg())

/**
 * 两种设置图片的方式：
 * 1.使用img src:
 *      +使用require导入图片，此时如果不配置esModule:false ,则需.defalut导出
 *      +采用import xxx from 图片资源，此时可以直接使用 xxxx
 * 2.background url
 * 
 */

运行之后发现边框出现，图片没有出现，需要在webpack.config.js里面配置。

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist'),
        //静态资源加载例如图片加载需要配置路径
        publicPath: "./dist/"
    },
    module: {
        rules: [
            // {
            //     //test一般就是一个正则表达式，用于匹配我们需要处理的文件类型
            //     test:/\.css$/,
            //     //use
            //     use:[
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上,因为兼容性处理要在css调用之前，所以需要将postcss-loader的配置放在css-loader右边
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // 往前找一个,即追回到postcss-loader
                        importLoaders: 1,
                        //解决图片加载不出的问题
                        esModule: false
                    }
                }, 'postcss-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                use: ['file-loader']
                    // use: [{
                    //     loader: 'file-loader',
                    //     options: {
                    //         esModule: false //不转为esModule
                    //     }
                    // }]
            }
        ]
    }
}

运行成功。

源代码：webpack5的案例演示

致敬代码大神
关注
专栏目录
【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader
qiaoyangla的博客
06-01 380
Loader概念 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 Loader的执行顺序 pre：前置loader normal：普通loader inline：内联loader post：后置loader 执行的优先级：pre>normal>inline>post 相同优先级执行顺序为：从右到左，从下到上 // 此时loader执行顺序：loader3 - loader2 - loader1 module: { rules: [ ..
webpack 图片文件处理：url-loader和file-loader
2401_83412285的博客
03-29 1092
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。可以戳这里获取](https://bbs.csdn.net/topics/618191877)，先到先得哦。**[外链图片转存中…(img-4XfhB4ai-1711652842410)][外链图片转存中…(img-JwYKkMAF-1711652842410)]
webpack-file-loader
qq_41893334的博客
05-18 2070
1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, 因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外, 还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包, 在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块, 用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
Webpack contrib之file-loader教程
最新发布
gitblog_00167的博客
09-10 478
Webpack contrib之file-loader教程 file-loaderFile Loader项目地址:https://gitcode.com/gh_mirrors/fi/file-loader 1. 项目介绍 file-loader 是一个广泛应用于Webpack构建流程的加载器。它的核心职责是处理并导出各种静态资源（如图片、字体文件等），将其移动到输出目录，并返回一个相对于输出目录...
Webpack File-Loader
JunChow
06-15 268
WebPack webpack is a module bundler，那什么是module呢？ 在ES6之前，前端使用RequireJS或SeaJS实现模块化，RequireJS是基于AMD规范的模块化类库，而SeaJS则是基于CMD规范的模块化库，两者都是为了推广前端模块化的工具。 当ES6出现之后，由于ES6自带模块化，也是JS第一次支持module。不过，很久以后，我们就可...
webpack5.0中使用file-loader的问题
qq_40072045的博客
03-07 833
1. webpack5.0 中对css图片路径的处理 环境 "webpack": "^5.70.0", "file-loader": "^6.2.0", "webpack-cli": "^4.9.2" 1.1 没有任何处理 /* image.css */ .image-bg { background-image: url("../img/WechatIMG2.jpeg"); width: 300px; height: 300px; } // createDOM.
webpack中的file-loader，以及url-loader
aliven1的博客
09-02 356
适用‘[name].[ext]’,表示打包后的图片名称和原文件名保持一致
【Webpack5笔记】Webpack高级配置---提升开发体验
qiaoyangla的博客
05-30 578
SourceMap Devtool | webpack 中文文档 开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. ...
webpack(7)_CSS_使用style-loader和css-loader
renzhongrui的博客
07-30 8083
style-loader 安装style-loader npm install style-loader --save-dev 安装css-loader npm install css-loader --save-dev
webpack加载图片使用file-loader。
supitll的博客
05-08 331
当时候file-loader的时候不需要再进行配置了，不然会显示不出来图片，再url-loader已经帮我们加载了，所以不需要配置file-loader。
Webpack:Loader学习——功能loader,file-loader（将内容原封不动输出（主要有图片 图标））
weixin_47295886的博客
04-03 634
分成3步骤（根据文件内容生成带hash值文件名、 将文件输出出去、 返回：module.exports = "文件路径（文件名）"）但是此时输出6张图片（3张自己输出 3张webpack输出 原因 webpack默认处理图片资源）（需要处理图片、字体等文件。阻止webpack默认处理图片资源，只使用file-loader处理。处理的内容：文件路径+将文件名改成hash值，然后路径表达式。——使用开发模式配置 不要使用devserve模式。引入+第一步（查看文件名生成的效果）运行（辉报错 但是显示了）
webpack5大常用loader
zk86547462的博客
08-22 645
官网 一，打包图片文件 1file-loader npm install --save-dev file-loader 默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。 import img from './file.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg|png|svg)$/, u
Webpack - loader
qq_43556517的博客
07-07 97
Loader 从下往上 css-loader 使用方式 1. 内联方式 import "css-loader!../css/index.css" // 直接在引入时使用，使用！分开 2. CLI方式(Webpack5中不再使用) // package.json "scripts":{ "build": "webpack --module-bind 'css=style-loader'!css-loader'" } 3. 配置方式 // webpack.config.js module: { // 规
前端学习案例4-webpack中使用file-loader
qq_41632427的博客
12-09 192
前端
webpack手写loader -----file-loader--给我们的代码添加标识
weikehang的博客
07-11 795
//file-loader只是对文件进行复制移动到固定目录 loaderUtils = require("loader-utils"); function loader(source) { //interpolateName获取文件的hash值，并插入值,生成唯一的文件名 let name = loaderUtils.interpolateName(this, "[hash:8...
webpack5基本教程-2
weixin_43484007的博客
10-11 450
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
Webpack（5）loader
悦涵仙子的技术笔记本
08-23 686
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。 示例 例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
2401_84152177的博客
05-15 873
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Webpack图片引入优化：url-loader实战与配置
本文详细解析了Webpack中的一个实用插件——url-loader，它是一种增强版的file-loader...url-loader是Webpack中一个强大的工具，通过其灵活的图片处理策略，简化了开发者的资源管理，对于提升前端性能具有显著的作用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值