1.webpack底层原理 (实现一个webpack)

步骤:1.拿到入口文件的代码并读出来转化为js对象(抽象语法术parser)
2.拿到所有模块的依赖 ‘./message.js’,放进数组中 引入第三方模块和babel相关
3.对代码进行转换使浏览器能够执行从es6/es module语法转化

1.创建打包函数Complier

2.传入入口文件,引入fs模块,使用fs.readFileSync读取入口文件,格式为utf-8

3.使用parser.parse分析出抽象语法术

4.使用traverse进行模块分析获取内容,获取依赖路径,把require替换成__webpack_require__;准备一个依赖数组,将获取的路径存储进去

5.递归遍历依赖数组,将每个路径文件都解析

6.打包文件,输出打包路径和结果

这是结合https://blog.csdn.net/qq_40036736/article/details/93979791这篇文章,和自己实现webpack打包步骤写的

2.webpack打包原理 (打包项目)

1.webpack是什么

webpack 是一个模块打包机,将根据文件间的依赖关系对其进行静态分析,然后将这些模块按指定规则生成静态资源

当 webpack 处理程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

2.webpack的作用

*代码拆分: webpack 有两种组织模块的依赖方式,同步、异步; 异步依赖将作为分割点,形成一个新的块;在优化了依赖树之后,每一个异步区块都将作为一个文件被打包
*智能解析:将预编译语言 转换成 浏览器识别的语言;webpack 有一个智能解析器,几乎可以处理任何第三方库;
*性能优化
 
3.webpack核心部分
  • 入口(entry): 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的
  • 输出(output): 告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。
  • loader: webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中
  • 插件(plugin): loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
  • 模式(mode):  通过选择 developmentproduction 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production
  • 浏览器兼容性(browser compatibility): webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器,在使用这些表达式之前,还需要 提前加载 polyfill

webpack原理类型问题的更多相关文章

  1. webpack原理与实战

    webpack是一个js打包工具,不一个完整的前端构建工具.它的流行得益于模块化和单页应用的流行.webpack提供扩展机制,在庞大的社区支持下各种场景基本它都可找到解决方案.本文的目的是教会你用we ...

  2. webpack原理

    webpack早就已经在前端领域大放异彩,会使用和优化webpack也已经是中.高级工程师必备技能,在此基础之上再对webpack的原理进行理解和掌握,必定会在未来的开发中事半功倍.若是对于webpa ...

  3. webpack原理探究 && 打包优化

    在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. ...

  4. Webpack 原理浅析

    作者: 凹凸曼 - 风魔小次郎 背景 Webpack 迭代到4.x版本后,其源码已经十分庞大,对各种开发场景进行了高度抽象,阅读成本也愈发昂贵.但是为了了解其内部的工作原理,让我们尝试从一个最简单的 ...

  5. 手写webpack核心原理,再也不怕面试官问我webpack原理

    手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6 ...

  6. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

  7. 关于webpack官网的学习

    webpack,从名词上,"web pack",大概可以看出是一个网页打包工具,其实它具有打包.压缩.解析编译的功能. 使用(配置webpack.config.js) entry: ...

  8. webpack学习笔记--配置总结

    从前面的配置看来选项很多,Webpack 内置了很多功能. 你不必都记住它们,只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下,再去查详细的使用文档. 通常你可用如下经验去 ...

  9. 手把手教你撸一个简易的 webpack

    背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的grunt,gulp.到后来的webpack和Parcel.但是目前很多脚手架工具,比如vue-cli已经帮我们集成了一些构建工具的使用. ...

随机推荐

  1. LED Decorative Light Supplier - Decorative Use Of LED Light Strips

    Led strip refers to the led assembly in the ribbon of the FPC (flexible circuit board) or PCB hard b ...

  2. docker-api的使用(java)

    通过docker-api来执行docker相关的操作.   配置 可以在docker启动文件docker.service中加入如下 vi /lib/systemd/system/docker.serv ...

  3. 可以使用的一些API(转存)

    聚合数据 juhe.com 转存的格式不如原文的好看,可以直接访问原文 https://www.jianshu.com/p/9a0acf69b789 api接口应该会越来越火,上个全的,楼主自己找找吧 ...

  4. 【网易官方】极客战记(codecombat)攻略-地牢-恐惧之门

    关卡连接: https://codecombat.163.com/play/level/dread-door 恐惧之门后藏满宝藏 简介: while-true 循环可以使用任何方法,如: while ...

  5. swoole扩展怎么用

    Swoole 是 PHP 的一个扩展,可以通过 PHP 扩展的方式进行安装和启用. 本地安装 Laradock 在本地安装的话,以 Laradock 为例,需要在 laradock 目录下的 .env ...

  6. VSCode配置FTP

    首先在VScode中下载安装插件SFTP Windwos下摁Ctrl+Shift+P,输入SFTP: config命令并运行,进入sftp.json配置项如下: { "name": ...

  7. FreeRTOS学习笔记2:列表

    list.h 列表结构List_t 列表:主要看三个 xLIST:1.5检查列表完整性的.但是需要开启.默认不开启 2:记录列表中列表项的 数量:3:记录当前列表项 索引号:4:列表中的最后一个 列表 ...

  8. 优化 : Oracle数据库Where条件执行顺序 及Where子句的条件顺序对性能的影响

    .Oracle数据库Where条件执行顺序: 由于SQL优化起来比较复杂,并且还会受环境限制,在开发过程中,写SQL必须必须要遵循以下几点的原则: 1.ORACLE采用自下而上的顺序解析WHERE子句 ...

  9. windows 动态库导出

    以下内容来自博客:https://blog.csdn.net/fengbingchun/article/details/78825004 __declspec是Microsoft VC中专用的关键字, ...

  10. 【Hibernate 懒加载】debug模式懒加载获取空数据

    <many-to-one name="department" class="k.domain.Department" column="depar ...