《webpack5 实战四》之loader(1)，高效web开发

最新推荐文章于 2024-04-08 20:55:19 发布
最新推荐文章于 2024-04-08 20:55:19 发布
阅读量606 收藏 29
点赞数 27
分类专栏： 程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84098033/article/details/137386082
版权
本文介绍了如何创建和使用自定义webpackloader，包括最简单的自定义loader实现、内联方式加载及Loader接口的应用，展示了如何替换文件内容并配置webpack配置文件来使用loader进行模块处理。
摘要由CSDN通过智能技术生成

文章目录

  • 系列文章目录

    • 前言

  • 一、最简单的自定义loader

    • 准备工作

  • 1. 新建自定义loader 文件

  • 2. 使用自定义loader

  • 3. 使用验证

  • 二、loader内联方式

    • 目标

  • 1. 新建自定义loader 文件

  • 2. webpack config 配置别名加载

  • 3. 内联使用

  • 4. 执行webpack 命令验证

  • 三、Loader 接口

  • 四、Loader 传参

    • 1. 新建select-hero-loader

  • 2. webpack config 配置

  • 3. 使用验证

  • 四、总结

    • Loder 特性

前言

webpack 的loader 基础作用相当于一个项目插件，能够将指定文件统一的处理，是一个函数，相当于源码经过这个函数，出去变成了想要的目标。

官方描述：

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

多余的不多赘述，看官方文档loader,介绍的很详细。这篇主要通过实战记录自定义loader，了解loader工作的整个过程。

一、最简单的自定义loader

准备工作

loader 可以看做一个函数，输入是源码，输出是经过loader 加工之后的。

自定义loader格式：

/**

  • @param {string|Buffer} content 源文件的内容

  • @param {object} [map] 可以被 https://github.com/mozilla/source-map 使用的 SourceMap 数据

  • @param {any} [meta] meta 数据，可以是任何内容

*/

function webpackLoader(content, map, meta) {

// 你的 webpack loader 代码

}

下面目标是创建一个英雄联盟英雄说明loader，loader 会替换英雄名和技能，增加详细说明。

1. 新建自定义loader 文件

hero-loader.js：

module.exports = function (source) {

console.log(source);

return source.replace(“德玛西亚”,“英雄联盟保健哥：德玛西亚！”)

}

这样一个loader 就创建完成了，接下来使用loader

2. 使用自定义loader

在webpack.config.js 文件里：

{

test:/.js$/,

use: “./src/custom-loader/hero-loader.js”, // 看这里，看这里

}

这里use 存放自定义loader 文件 存放路径

3. 使用验证

新建hero.js:

exports.hero =‘德玛西亚’

新建index.js:

import hero from “./hero.js”;

console.log(hero);

接下来执行webpack 打包命令打包，生成dist 下文件，具体webpack 配置见源码。

在这里插入图片描述

将打包后的文件引入index.html ，并在浏览器打开。

在这里插入图片描述

结果德玛西亚已经替换成了更详细的介绍成功了。

二、loader内联方式

目标

  • 通过内联的方式使用loader

  • 别名载入loader

1. 新建自定义loader 文件

skill-loader:

module.exports = function (source) {

return source.replace(“大宝剑”,“R技能是：大宝剑！”)

}

2. webpack config 配置别名加载

resolveLoader:{

alias:{

‘skill-loader’:resolve(__dirname,‘src/custom-loader/skill-loader.js’)

}

}

3. 内联使用

skill.js:

exports.skill = ‘大宝剑’

index.js 引入:

import skill from “!skill-loader!./skill.js”;

console.log(skill);

4. 执行webpack 命令验证

打包之后的文件：

/***/ “./src/hero.js”:

/!*******************!\

!*** ./src/hero.js ***!

*********************/

/***/ ((__unused_webpack_module, exports) => {

eval(“/*\n * @Author: ZY\n * @Date: 2022-02-14 16:26:29\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:27:33\n * @FilePath: /webpack-demo/packages/loader-demo/src/hero.js\n * @Description: 文件描述\n */\n\nexports.hero =‘英雄联盟保健哥：德玛西亚！’\n\n//# sourceURL=webpack:///./src/hero.js?”);

/***/ }),

/***/ “./src/index.js”:

/!********************!\

!*** ./src/index.js ***!

**********************/

/***/ ((__unused_webpack_module, webpack_exports, webpack_require) => {

“use strict”;

eval(“webpack_require.r(webpack_exports);\n/* harmony import / var hero_js__WEBPACK_IMPORTED_MODULE_0_ = webpack_require(/! ./hero.js / “./src/hero.js”);\n/ harmony import / var skill_loader_skill_js__WEBPACK_IMPORTED_MODULE_1_ = webpack_require(/! !skill-loader!./skill.js / “./src/custom-loader/skill-loader.js!./src/skill.js”);\n/\n * @Author: ZY\n * @Date: 2022-02-14 11:44:14\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:48:22\n * @FilePath: /webpack-demo/packages/loader-demo/src/index.js\n * @Description: 文件描述\n */\n\n\n\n\nconsole.log(hero_js__WEBPACK_IMPORTED_MODULE_0_);\nconsole.log(skill_loader_skill_js__WEBPACK_IMPORTED_MODULE_1_);\n\n//# sourceURL=webpack:///./src/index.js?”);

/***/ }),

/***/ “./src/custom-loader/skill-loader.js!./src/skill.js”:

/!********************************************************!\

!*** ./src/custom-loader/skill-loader.js!./src/skill.js ***!

**********************************************************/

/***/ ((__unused_webpack_module, exports) => {

eval(“/*\n * @Author: ZY\n * @Date: 2022-02-14 16:26:35\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:28:04\n * @FilePath: /webpack-demo/packages/loader-demo/src/skill.js\n * @Description: 文件描述\n */\n\nexports.skill = ‘R技能是：大宝剑！’\n\n//# sourceURL=webpack:///./src/skill.js?./src/custom-loader/skill-loader.js”);

/***/ })

可以对比看一下内联和webpack rule 配置有什么区别

  • 收集代码map的时候key是不同的，内两方式会加上loader path

index.html 引入打包js之后运行结果：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

链图片转存中…(img-K05LmCcG-1712246068930)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

资料领取方式：戳这里免费领取

2401_84098033
关注
专栏目录
webpack5 中 css-loader 的配置
简桐
02-08 1408
loader 解释器 //webpack.config.js module: { rules: [ //在这里面定义指定文件对应的解释器 //规则定义 { test: /\.js$/, //正则 exclude: /node_modules/, use: { loader: "babel-loader", //根据 .babelrc 文件艰辛规则渲染 }, }, {
webpack5不要再用url-loader了
前端精髓
05-22 9065
webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。 webpack5 新增 Asset Modules 资源模块。 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。 在 webpack 5 之前，通常使用： 1、raw-loader 将文件导入为字符串。 2、url-loader 将文件作为 data URI 内联到 bundle 中
基于 webpack 5 实现自定义 loader
小柒的前端之旅
07-30 1241
基于 webpack 5 创建自定义 同步、异步loader，在此基础上实现一个简易的渲染 markdown 的 loader 和 合成雪碧图的 loader。
SWIG 转换C++接口为Java接口
qgbihc的专栏
10-23 1631
一、SWIG Simplified Wrapper and Interface Generator (SWIG) 是一个开源的，C或C++编写的软件与其它各种高级编程语言进行嵌入包装的开发工具。 SWIG能应用于各种不同类型的语言包括常用脚本编译语言例如Perl, PHP, Python, Tcl, Ruby and PHP。支持语言列表中也包括非脚本编译语言，例如C#, Common Lisp (CLISP, Allegro CL, CFFI, UFFI), Java, Modula-3, OCAML以及
关于webpack5配置url-loader问题
Y_I_M_I_l_u_c_k的博客
01-24 1666
1. 跟着coderwhy老师自学vue,再配置url-loder时，发现一直没办法显示背景图片。 2. The 'mode' option has not been set, webpack will fallbaenerated问题 3. Module build failed: Error: Cannot find module 'file-loader' 问题
webpack5 url-loader打包图片资源大小与limit限制结合时，生成重复图片资源，页面也不能正常显示打包后的图片的问题的解决
u010234868的专栏
11-18 2656
目录： 图片引用在./src/css/style.css中： background: url(../imgs/small.jpg) no-repeat; 首先使用webpack5，打包./src/imgs中的小图片，大小为6.98KB，小于webpack.config.js中配置中limit的值，具体步骤如下： 1. 安装url-loader npm install url-loader --save-dev 2.webpack.config.js中配置规则 rules: [ .
Web前端模块化开发教程（ES6+Node.js+Webpack）_源代码.zip
06-29
本教程主要围绕Web前端的模块化开发展开，利用ES6的语法特性、Node.js环境以及Webpack工具进行深入探讨。在现代Web开发中，模块化已经成为不可或缺的一部分，它有助于提高代码的可读性、可维护性和复用性。下面将...
webpack HappyPack实战详解
10-16
webpack是一个现代JavaScript应用程序的静态模块打包器。随着前端项目的日益复杂，Webpack的构建时间可能会变得较长。...因此，在学习和工作中，了解和使用webpack HappyPack对于提高Web前端开发的生产力至关重要。
vue.js之实战webpack.pdf
02-15
Vue.js 与 Webpack 结合使用，可以构建高效的前端应用。本篇内容将深入探讨 Webpack 的配置以及在 Vue.js 开发中的实际应用。 1. **Webpack 配置基础** - **配置文件结构**：Webpack 的配置文件是一个 Node.js ...
webpack-vue实战Demo
08-23
Webpack 和 Vue 结合使用是现代前端开发中的常见实践，尤其对于构建单页面应用程序（SPA）而言，这是一个高效且灵活的解决方案。在这个“webpack-vue实战Demo”中，我们将深入探讨如何利用这两个工具来搭建一个实际...
Webpack配置实战
gogo2027的博客
10-31 441
本文从 Webpack 基础配置、Webpack 进阶配置 2 个角度进行讲述，从 Webpack 实践着手，和你一起了解 Webpack。
webpack5 文档 自定义loader遇到stats.toJson().modules[0].source 为undefined
github_39506988的博客
12-03 309
先去webpack5 英文官网找到对应示例文档， 拷贝完发现还是报undefined 然后去看了stats文档，默认为false不显示… 加上source: true测试成功
webpack5 中使用url-loader图片资源重复且不显示的问题
qq_43342124的博客
02-11 673
webpack5 中使用url-loader的问题 当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。 module.exports = { module: { rules: [ {
浅析webpack5原理-自定义loader及plugin
最新发布
haixtx的博客
04-08 1122
从webpack中最为重要的loader和plugin配置入手，通过自定义实现一些loader和plugin来介绍webpack的原理
webpack5 基础配置 loader的认识 css-loader
lin_fightin的博客
03-21 2402
webpack5 之前也是一直对webpack有大概的了解，没有一个全面的学习，现在忙完答辩了，好好从头到尾学习一下。 webpack是一个静态的模块打包工具，顾名思义就是支持模块化，将我们的文件打包成静态资源如js css png等资源让我们放到静态资源服务器上。 webpack的打包机制： webpack会找到我们的入口文件，从入口文件开始，一步一步找到应用程序所需要的所有模块，生成一张依赖关系图，然后根据依赖关系图打包所有的模块。（不同的文件对应不用的loader打包），如果不在依赖关系图中的模块，是
webpack5 loader
weixin_43294560的博客
05-21 840
data?) {// source 为 loader 的输入，可能是文件内容，也可能是上一个 loader 处理结果 return source;};source：资源输入，对于第一个执行的 loader 为资源文件的内容；后续执行的 loader 则为前一个 loader 的执行结果sourceMap: 可选参数，代码的 sourcemap 结构。
Webpack5实战笔记----12.url-loader处理图片
weixin_62273462的博客
11-03 462
安装url-loader: npm i url-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..
webpack开发自定义功能loader
问白的博客
04-02 4655
webpack loader 开发 概述 使用webpack来开发一些自定义的loader，可以让我们更加深刻的认识和了解webpack的工作机制是怎么样的。 每一个loader都是一个函数，该函数在loader转换资源的时候调用。在该函数中可以使用this来访问上下文环境并可以使用一些 loader API, 比如 this.version表loader api的版本号、 this.contex...
webpack5
weixin_38255079的博客
02-16 1249
五个概念 entry：哪个文件为入口起点开始打包 output：输出的资源到哪里去，叫什么名字 loader：翻译官，webpack只能处理js代码，其他要交给loader来处理。 plugins，插件，执行范围更广的任务，如压缩 mode。开发模式(development)：本地可以运行就可以，生产模式(production)：代码优化上线 执行打包 1.纯命令行 # 安装。不加版本号默认安装最新版本 npm install webpack webpack-cli --save-dev #webp
Webpack图片引入优化：url-loader实战与配置
本文详细解析了Webpack中的一个实用插件——url-loader，它是一种增强版的file-loader，用于处理图片资源的加载问题。url-loader的主要作用是根据图片文件大小自动决定是否将其转换为Base64格式并写入HTML页面，从而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值