Webpack 源码学习系列（一）

最新推荐文章于 2024-10-14 08:34:05 发布

weixin_34405557

最新推荐文章于 2024-10-14 08:34:05 发布

阅读量152

点赞数

文章标签： webpack git json ViewUI

原文链接：https://segmentfault.com/a/1190000011277012

版权

学习源码，在于了解整体结构，对整个机制有一个整体了了解，做到心里有数，而不是看别人怎么用就怎么用，不报错就行。

获取源码

首先，先到github中获取源码。

git clone https://github.com/webpack/webpack.git

寻找入口

获取到源码以后，首先要找到入口。

webpack是一个npm包，所以可以在package.json中找到对应的入口，即："main": "lib/webpack.js",

webpack.js解读

webpack.js里只有两个成员webpack(options, callback) 和exportPlugins(obj, mappings)

`webpack`函数的作用

检查options
检查是否是MultiCompiler的情况（貌似还没用过，先不管）
实例一个WebpackOptionsDefaulter对象，并调用process为options初始化默认属性
创建一个compiler，并初始化Pliugins，如果有callback就调用，然后返回。
在这中间还调用了NodeEnvironmentPlugin做了一些Node环境的设置（暂时不管）

`exportPlugins`的作用

从下图中可以看出，这是用来导出默认实现的Plugins的，暂时可以不用管，后续可以查看导出了什么插件。

总结

这一章只是简单的看了一下入口文件进行一个简单的了解。

本章内容内容：

webpack入口
lib/webpack.js的主要内容

下一章内容

compiler对象

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34405557

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Webpack源码浅析

content6的博客

02-05

1459

compliation就像是生产一部手机，生产的过程基本一致，但生产的手机可能是小米手机也可能是魅族手机。生命周期，之后根据webpack config文件的output配置的path属性，将文件输出到指定的文件夹。compilation代表的是一次编译作业，每一次的编译都可能不同；的加持，代码编写非常灵活，node中流行的callback回调机制（说的就是回调地狱），webpack使用的炉火纯青。至此，从入口文件开始，webpack收集完整了该模块的信息和依赖项，接下来就是如何进一步打包封装模块了。

webpack 源码解析系列

言川的博客

04-09

5591

Webpack 源码解析 Webpack 作为前端领域最重要的构建工具,任何一个优秀的前端工程师必定需要对它有比较深入的了解。本系列文章会带您深入理解webpack的实现原理，阅读关键代码，并自己实现一些简单的功能。这个系列总共包括8篇文章，首先分析我们常用的一些loader，然后看webpack核心代码的工作流程，最后探讨HMR以及tree-shaking等特性。文章全部在github...

参与评论您还未登录，请先登录后发表或查看评论

webpack源码学习

我的博客简介

08-02

228

代码】webpack源码学习。

2-2-5webpack源码

我不信走不到天明

04-13

246

1.内容概述 1.webpack打包流程拆分不同的环节 2.做了什么工作 3.如何完成的 4.使用了什么技术 5.模块的加载和loader的使用 6.webpack的配置演示 2.打包后源码分析 path: path.resolve(‘dist’) 输出目录的路径对输出文件进行分析 1.我们称之为模块定义 “./src/index.js”: 路径模块id 视为键值对 (function (module, exports) { console.log(‘index.js内容’) module.exp

webpack - 源码解析

weixin_41154070的博客

08-11

327

webpack : 5.49.0

从Webpack源码探究打包流程，萌新也能看懂

liubangbo的专栏

09-16

304

上一节提到的SingleEntryPlugin（还有其他的EntryPlugin），就是一个启动口，等到触发compile.hooks.make的时候，就会启动SingleEntryPlugin中的compilation.addEntry这个方法，这个方法就是启动构建入口模块，成功后将入口模块添加到程序之中。mainTemplate.render触发了hooks.render这个钩子，返回了一个ConcatSource的资源。

教你如何看源码Webpack源码（资料+视频教程）

04-30

本资源提供了一系列关于如何阅读和理解Webpack源码的资料和视频教程。通过这些内容，学习者将了解Webpack的核心概念、源码结构和实现原理，掌握如何阅读和理解Webpack源码的方法和技巧。适用人群：本资源适用于对...

webpack

03-09

在生产环境中，Webpack 可以进行一系列优化，如 Tree Shaking（移除未使用的代码）、Scope Hoisting（提升作用域）、Minification（压缩代码）等。此外，通过配置 `mode` 为 `'production'`，Webpack 会自动启用这些...

webpack源码解析系列（一）

jianjieX的博客

12-24

382

引言 webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)ﾉﾞ）写在前面的话在阅读一个东西的源码之前，首先需要了解这个东西是什么，怎么用。这样在阅读源码过程中才能在大...

webpack视频教程及源码百度云盘下载地址

08-12

### Webpack视频教程及源码知识点详解 #### 一、Webpack简介 Webpack是一款现代JavaScript应用程序的模块打包器。它能够将多个模块（如JavaScript文件、样式表、图片等）组合成一个或多个包含应用程序所有依赖项的...

webpack源码初探

梦殇的博客

05-09

331

本文只是笔者初次学习webpack源码所写（感谢依柳诚提供的阅读webpack源码的思路），供以后精读作目录使用。 vscode debug lib/index.js入口 lib/webpack.js const webpack = require('../lib/index.js') // 直接使用源码中的webpack函数 const config = require('./webpack.config') const compiler = webpack(config) 校验op

Webpack之源码浅析

阿嚏乱码的地方

06-11

1768

前言用了很长时间webpack，lodaer、plugin也用的很多了，但始终好奇webpack的内部运行机制是怎样的，我花了些时间看了些webpack源码，在这里用文字将他们记录下来。准备工作创建三个文件demo、webpack、webpack-cli 三个项目，其中 demo 项目用于调用 demo/node_modules/webpack-cli 将 src/index.js 打包为 dist/main.js webpack 项目盛放的是从 github 下载的 webpack 源码.

webpack原理，webpack源码解析，超详细

dxh9231028的博客

08-24

1267

直到所有模块都被构建完成后，才会跳出循环。编译代码需要一个合适的环境啊，除了编译代码的环节，其他的如解析更改配置文件，以及将我们写的配置换成对应插件，以及注册钩子（就是我们之前说的tapAsync）以及输出文件等等，基本除了转换代码的活，都是他在做，而compilation对象的作用仅仅是转换代码，所以创建了这个对象，也意味着我们进入了转换代码的阶段了。简单点说，当我们配置不止一个入口文件时，那么每个入口文件都是独立的编译任务，此时便会给每一个入口分配一个compiler对象，这就是多编译模式。

webpack 学习入门

最新发布

被拯救的威尼斯的博客

10-14

877

webpack1. 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 入口 - Entry1.2.2 出口 - Output1.2.3 Loader1.2.4 插件 - Plugins1.2.6 模式 - Mode2. webpack 初体验2.1 初始化配置2.1.1. 准备2.1.2. 写代码2.1.3 编译打包应用3. webpack 开发环境的基本配置3.1 打包样式资源3.2 打包 HTML 资源3.3 打包图片资源3.4 打包其他资源3.5 开发环境配置 - de

阅读学习webpack

08-10

本项目用于阅读学习webpack源码，项目基于webpack3.10.0版本。wepack源码以及注释放在debug_node_modules文件夹下。

webpack + vue项目搭建源码

08-29

webpack + vue项目搭建源码

webpack源码解析一

vv_bug

12-13

3348

先上一张流程图，小伙伴可以跟着这个流程图结合代码往下走：图片来源于：细说webpack之流程篇开始 git clone https://github.com/webpack/webpack.git yarn yarn setup 打包 node ./bin/webpack.js bin/webpack.js //判断有没有安装webpack-cli，没有话的就提示是否需要安装 con...

Webpack源码泄露到Vue快速入门

记录开发和安全学习过程中的点点滴滴

05-23

2435

刚好最近学习了Vue和Webpack,回顾一下学习并对Vue的学习过程中对笔记总结进行记录,同时进行思考过程中的理解加入其中,方便自己进行后续的学习和回顾,当然因为这两个内容都和我之前在进行渗透测试中碰到的一种漏洞类型相关,其中很容易碰到资产是关于使用wepack进行打包的,并且存在js.map泄露,在源码泄露中,常见的前端是通过vue进行编写的,顺便加深一下之前渗透过程的印象.webpack是一个JavaScript应用程序的静态资源打包器。

Vue-webpack4

05-02

空的webpack4 一个Vue.js项目构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。 Vue-webpack4

webpack源码

woyebuzhidao321的博客

07-03

654

一、打包后文件分析 /** * 01 打包后的文件就是一个函数自调用，当前函数调用时传入一个对象 * 02 这个对象我们为了方便将之称为是模块定义，它就是一个键值对 * 03 这个键名就是当前被加载模块的文件名与某个目录的拼接（） * 04 这个键值就是一个函数，和 node.js 里的模块加载有一些类似，会将被加载模块中的内容包裹于一个函数中 * 05 这个函数在将来某个时间点上会被调用，同时会接收到一定的参数，利用这些参数就可以实现模块的加载操作 * * 06 针对于上述的代码就相当于是

Webpack 源码学习系列（一）

获取源码

寻找入口

webpack.js解读

webpack函数的作用

exportPlugins的作用

总结

`webpack`函数的作用

`exportPlugins`的作用