webpack从0到手写webpack_02

最新推荐文章于 2024-01-13 16:07:07 发布
原创 最新推荐文章于 2024-01-13 16:07:07 发布 · 151 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文揭示了Webpack的本质——模块打包工具，它不仅能处理ESModule，还包括CommonJS、CMD、AMD等多种模块规范，并扩展至Vue、React等项目中的CSS和图片打包。理解它作为全面的模块解决方案而非单纯翻译器至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webpack从0到1——02

Bundler：模块打包工具

看完了上一篇：[https://blog.youkuaiyun.com/frontendchen/article/details/109724243]
可能很多人认为webpack就是一个js的翻译器，对不起，大家千万不要被眼前的东西所蒙蔽，webpack实际上称不上一个翻译器，以为它
只认识import这样的语句，其它高级的JS语法它一概不认，你把它称作js翻译器实际上是高看了它
如果我们打开google输入webpack,可以看到结构是webpack 是一个模块打包器

在这里插入图片描述
像 import引入的这些文件我们都可以把它们看作模块，webpack就是一个把他们打包到一起的模块打包工具
在这里插入图片描述
大家知道在我们写js代码的时候不仅有es module这样的代码规范，实际上还有CommonJS，CMD，AMD等规范
webpack对这样规范下的代码一样可以识别，以CommonJs为例
我们使用require的方式导入模块
在这里插入图片描述
三个模块的模块的导出也要对应修改
在这里插入图片描述
这样的话，我们每个模块通过CommonJS的方式导出，在index.js中，我们又通过CommonJs的方式引入进来，webpack是一个模块打包工具，它能够识别任何模块引入的语法所以这种语法它也能正常的帮我们进行翻译。我们将dist文件夹删除，进行重新打印，同样生成了dist目录，index.html打开内容正常显示
在这里插入图片描述
这一篇的重点讲的是webpack其实是一个模块打包工具并不是js翻译器
最早的时候webpack是一个js的模块打包工具，后来随着webpack的发展，webpack能打包的文件不仅仅是js文件，它还可以打包其它任何形式的模块文件
比如说我们vue或react的项目的时候，引入过一些css样式文件。它还能打包png,jpg类型的图片文件等等。所以webpack准确定义就是一个模块打包工具

手写一个webpack（loader、plugin）
越努力越幸运
07-21 2646
手写webpack 源码和更多案例放在github上面，欢迎star 实现一个简单weboack可以分为4点 编译一个入口文件(代码文件) 解析并改造代码如将 import、require转换成 webpack_require 收集依赖的模块并重复2 生成文件并导出上面的模版。 扩展： 加上loader (文件转换) 加上plugin （编译过程中 不同周期 做额外的事，比如编译过程中加注释，加图片等等。。。） 搭建骨架 class KWebpack { constructor(){
手写一个webpack插件
gogo2027的博客
09-28 234
前端性能优化是一个老生常谈的话题，关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容，有以下推荐雅虎军规35条某东上搜“前端性能优化”，书籍也特别多。但是前端性能优化做的所有工作，都和一个灵魂拷问有极大的关系：在浏览器输入url后，发生了什么？首先url是一个域名，首先它要被解析成ip地址。如果你的设备之前访问过该url，那么本地可能会缓存ip地址。如果没有缓存过，那么就向dns服务器进行解析。根据 IP 地址和默认端口建立TCP连接，三次握手。
手写webpack
RookieLink
02-28 250
手写webpack 我们来手动实现一个简易的webpack， zf-pack 开发方式 新建一个仓库，然后执行npm link即可 在需要构建的项目下面，执行npm link zf-pack package.json配置 { "name": "zf-pack", "version": "1.0.0", "main": "index.js", "license": "MIT", ...
手写一个Webpack吧~
量子前端的博客
07-02 908
手写一个简易版的webpack，将所有模板整合到bundle.js中
手写Webpack-Plugin
最新发布
Mahuicool的博客
01-13 1516
通过插件我们可以扩展webpack，使webpack可以执行更广泛的任务，拥有更强的构建能力。
webpack:从0到手写webpack
08-04
从0到手写webpack bh-pack 是 手写wepack的项目 main.ejs模板内有webpack内置的解析构建完模块的方法。 Compiler 目前主要处理config来的配置内容，并根据配置内容的对源码进行处理，再按照 main.ejs 的模板打包输出...
webpack学习(手写webpack、loader、plugin)
hot_boom_dog的博客
11-02 582
1 webpack介绍 webpack是一个开源的前端打包工具，Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。如：将浏览器无法识别的es6代码转换成es5、sass和less等css框架进行转换成css文件、通过使用pollify解决浏览器兼容等问题。 2 配置文件的作用 配置文件主要是告诉webpack那个文件为打包入口(entry)、向何处输出改文件(output)，在输出的过程中需要通过什么插件帮忙转换和处理代码(loader和plugin)等等，
手写一个webpack插件（plugin）
小小•愿望的博客
05-30 2208
在使用webpack的时候，我们有时候需要在 webpack 构建流程中引入自定义的行为，这个时候就可以在 hooks 钩子中添加自己的方法。
stylus-native-loader::black_nib:适用于Webpack的超快速手写笔加载器，利用了Stylus的内置功能
05-03
手写笔加载器 用于超快速加载程序，利用的内置功能。 配置用于现代开发。 与其他使用Webpack解析器来实现导入路径解析（具有一些限制和增加的开销）的其他Stylus加载程序不同，stylus-native-loader依赖于Stylus...
webpack系列 —— 模块化原理-CommonJS
七月
05-25 1333
webpack是基于node.js开发的，而node.js开发的模块化规范是commonJS. webpack npm node之间关系？ webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包； webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目 npm是于Node社区中产生的，是nodejs的官..
手写迷你版的webpack
08-10
手写迷你版的webpack
webpack-hand-write:Webpack学习库
03-15
Webpack手写 webpack-cli 个人理解 webpack-cli既可以通过cli命令行，也可以通过脚本形式调用webpack进行工程编译。 流程 ♡webpack核心方法（webpack本质就是一个方法） 配置文件，获取选项（开发者自定义提供） 执行webpack(options) ，返回compiler编译器，就是Compiler的类实例 执行compiler.run(callback) ，重新接收err ，统计两个参数 callback内部打印出编译成功后的统计信息，任选。 实现 const webpack = require ( 'webpack' ) ; const options = require ( './webpack.config' ) ; const compiler = webpack ( options ) ; compiler . run ( ( er
手写一个 webpack 插件
杏子
02-22 976
webpack 是目前前端最流行的打包工具，在 webpack 的世界里，一切都可以看成是一个包模块。包括但不限于 JS，CSS，图片资源。webpack 本身只支持打包 JS 文件。其他的资源比如 CSS 和 图片只能通过 loader 进行编译后进行打包。打包之后的 CSS 和 JS 混在一个文件中。如果想要将 CSS 单独提取出来就需要用到 plugins 插件。
webpack插件怎么手写
wade3po的博客
09-09 510
webpack插件没什么好说的，用过的都知道怎么配置，只是不知道内部怎么执行。今天学一学插件的一些机制，手写一个插件并不难。 之前介绍过了，webpack本质上是一种事件流机制，核心就是tapable，通过注册事件，触发回调，完成插件在不同生命周期的调用，内部也是通过大量的插件实现的。tapable内部暴露的方法挺多的，主要就是同步和异步，异步分为并行和串行。可以去GitHub上面看看： https://github.com/webpack/tapable#tapable 这些方法都有用法示例，本来想写写使
五、手写webpack
qq_25354709的专栏
02-14 254
一、webpack手写 二、webpack分析及处理 三、创建依赖关系 四、AST递归解析 五、生成打包结果 六、增加loader 七、增加plugins
手写一个Webpack,带你了解构建流程
程序员辰风的博客
11-09 306
Webpack是一个强大的打包工具，拥有灵活、丰富的插件机制，网上关于如何使用Webpack及Webpack原理分析的技术文档层出不穷。最近自己也是发现面试官问到Webpack特别喜欢问构建流程，那么本文主要探讨，Webpack的一次构建流程中，主要干了哪些事儿，带领您手写一个打包工具。真是卷...本文主要讲的是基本的构建和输出打包，不包含treeshaking、热更新等其他功能的内容。初始化参数。获取用户在文件配置的参数开始编译。初始化Compiler对象，执行run方法开始编译。
手写webpack （持续更新）
Angela
10-12 2317
本文目的：手写webpack的配置文件,打包个性化的项目。 参考文献：webpack官方文档 1.首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）： mkdir webpack-demo && cd webpack-demo npm init -y npm install webpa...
手写一个webpack，看看AST怎么用
程序员成长指北
02-13 862
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群本文开始我会围绕webpack和babel写一系列的工程化文章，这两个工具我虽然天天用...
手写 webpack loader
u013262823的博客
01-31 384
webpack loader (webpack 加载器) webpack => web pack 1)转换ES6语法成ES5 2)处理模块加载依赖 3)生成一个可以在浏览器加载执行的 js 文件 loader （引用定义） 1、是 webpack 用于在编译过程中解析各类文件格式，并输出； 2、本质上就是一个 node 模块，通过写一个函数来完成自动化的过程； 3、由此我们就可以在开发模式下...
webpack 手写plugin
09-12
要手写一个webpack插件，你可以按照以下步骤进行操作： 1. 首先，了解webpack自身插件的调用流程。你可以参考webpack内部插件的实现方式来理解。其中一个例子是NodeEnvironmentPlugin插件。 2. 创建一个新的插件文件，比如TestPlugin.js，并在文件中定义一个插件类，比如TestPlugin。 3. 在插件类中使用tapable实例的方法，在webpack的emit钩子函数执行时触发我们定义的函数。你可以使用compiler.hooks.emit.tap方法来绑定钩子函数。 4. 在钩子函数内部，使用compiler.outputFileSystem.writeFile方法创建一个自定义的文件，并在文件中写入你想要的内容。比如你可以写入一句话，如"//我们的第一个webpack插件！"。 5. 在webpack配置文件中引入你的插件，并将它作为一个实例加入到plugins数组中。 以下是一个示例的webpack配置文件，展示了如何引入TestPlugin插件： ``` const path = require('path'); const TestPlugin = require('./TestPlugin'); module.exports = function() { return { mode: 'development', entry: ['./src/app.js'], output: { path: path.join(__dirname, 'out'), filename: 'out.[name].js' }, plugins: [ new TestPlugin() ] }; }; ``` 通过以上步骤，你就可以手写一个简单的webpack插件了。这个插件会在webpack输出的文件夹中创建一个自定义的文件，并在文件中写入一句话。你可以根据自己的需求，进一步扩展和定制插件的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值