美文网首页
webpack原理，手写一个简单webpack

webpack原理，手写一个简单webpack

作者: mafa1993 | 来源:发表于2021-05-29 21:09 被阅读0次

webpack 原理 手写webpack

webpack的功能

  1. 读取文件，然后生成一个新的文件，bundle.js
  2. 前端不能使用require去读取文件，
  3. 收集依赖，根据代码中的import,将所有需要的文件引入
  4. 然后把es6转换成es5
  5. 替换require和export

weppack 实现

  1. 写一个用于commen.js规范的add
  2. 写index.js
  3. 改写为es6模式
  4. 安装babel全家桶。用于生成ast树等

AST 语法树

  1. 将string代码转换成树状结构
    • astexplorer.net
  2. 转译器

vite原理

  1. index.js 为es6的语法，script标签加上type=module是可以直接引用使用的
  2. 然后并实现vue ts等的引入

相关文章

网友评论

      本文标题：webpack原理，手写一个简单webpack

      本文链接：https://www.haomeiwen.com/subject/xususltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|webpack原理，手写一个简单webpack|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！