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. selenium的定位方法-单元素定位

    selenium自动化测试中,提供了单个元素定位方法,多个元素定位方法,2种方式都是根据元素属性:ID.NAME.CLASS_NAME.TAG_NAME.CSS_SELECTOR.XPATH.LINK ...

  2. shiro登录认证过程讲解

      先粘出登录的代码 1. 可以看到已经获取到了username和password ,为了接下来的认证过程,我们需要获取subject对象,也就是代表当前登录用户,并且要将username和passw ...

  3. 神经网络的基础-Graph,Session

    张量:基于 Tensorflow 的 NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数),得到模型. 张量:张量就是多维数组(列表),用“阶”表示张量的维度. 0 阶 ...

  4. SQL 杂项

    select  *  from 表  where to_date(ksrq,'yyyy-MM-dd')<=sysdate and  sysdate  <= to_date(jsrq,'yy ...

  5. CDH安装错误集锦

      CDH安装过程中出现的错误 1.iptables: /sbin/iptables 不存在 我是因为误删将 /sbin/下的文件删除了. 解决方法: yum install iptables 2.c ...

  6. 【visio】跨职能流程图

    归属于 流程图类别 相比于普通流程图,突出了参与流程的组织.部门之间的联系,形式化地说,它突出的是参与流程的对象之间的联系. 它除了表达基本流程,同时也能展示每个每个流程的归属方,让每个对象明确知道自 ...

  7. 2.1 【配置环境】 JDK + eclipse + selenium

    1.jdk以及eclipse的具体安装详见  http://www.cnblogs.com/ericazy/p/6082194.html 安装1.7 jdk即可 2.selenium 旧版本安装: s ...

  8. Nuxt的路由动画效果

    Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的 全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的 ...

  9. 510,position的值,relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  10. PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式

    $test=$_POST["test"]; $test= preg_replace("/(\n)|(\s)|(\t)|(\')|(')|(,)/" ,',' , ...