关于webpack,你想知道的都在这;
咱也标题党一回 哈哈哈
要使用webpack优化项目打包构建速度,首先得知道问题出在哪,
要知道问题出在哪,首先得知道webpack 打包的基本原理才能针对性的去做优化,下面首先了解webpack基本原理
一,webpack构建执行流程
① 初始化参数
我们执行npx webpack 命令的时候,webpack首先会检测参数是否合法,然后去初始化我们的配置参数
②开始编译的准备工作
这也是编译阶段开始的部分 ,这个部分会有个概念; compiler
首先会实例化一个Compiler对象,然后添加上一步校验的参数
③编译模块
使用compiler.run 进行编译
这里实例化compilation
然后找到入口文件,通过acron 转换为ast语法树,
webpack递归找到所有依赖的模块,webpack中会通过入口递归把所有依赖的模块使用loader进行处理
这里可以插一句loader的作用就是处理文件
④完成模块编译
将上一步得到的module封装成module代码
⑤输出资源
保存到assets中
⑥输出完成
调用onCompilered 生成文件保存到目录
二,关于loader和plugin
webpack依靠的就是各种loader和plugin来完成代码的转化,文件的转化,打包等任务,webpack本身功能并不强大,只是loader和plugin赋给他强大的”外挂“功能
①loader的总体运行流程
②plugin的原理
每个插件都是一个函数,并且函数的prototype 上会绑定一个apply方法
举个栗子 一下代码会再编译过程中打印hello,参数名字
class DonePlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.done.tap("DonePlugin", (stats) => {
console.log("Hello ", this.options.name);
});
}
}
module.exports = DonePlugin;
webpack最最最重要的部分莫过于优化配置了
1 缩小范围
extensions 在导入语句import require 没有添加扩展名后缀的时候,指定extension之后会再指定的文件扩展名中寻找文件
resolve:{
extensions: ['.js','.jsx','.json','.css']
}
alias 配置别名会加快webpack查找模块的速度
关于webpack,你想知道的都在这;的更多相关文章
- 看完SQL Server 2014 Q/A答疑集锦:想不升级都难!
看完SQL Server 2014 Q/A答疑集锦:想不升级都难! 转载自:http://mp.weixin.qq.com/s/5rZCgnMKmJqeC7hbe4CZ_g 本期嘉宾为微软技术中心技术 ...
- 关于MySQL慢日志,你想知道的都在这
关于MySQL慢日志,你想知道的都在这 https://mp.weixin.qq.com/s/Ifbq0Dk13SO3WVghqWVUbA 作者介绍邹鹏,现任职于腾讯云数据库团队,负责腾讯云数据库My ...
- CYDIA装了个插件,想删除怎么都删除,电脑如何删除插件?
http://bbs.weiphone.com/read-htm-tid-3670917.html 装了个插件,想删除怎么都删除不掉不要跟我说在CYDIA里面删除.,在CYDIA里点击该插件就会闪退C ...
- Swift具体解释之三----------函数(你想知道的都在这里)
函数(你想知道的都在这里) 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正.一起学习. 1. 函数的简单定义和调用 简单的无參函数就不再赘述 , ...
- 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(上) 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(下)
微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...
- python学习之路------你想要的都在这里了
python学习之路------你想要的都在这里了 (根据自己的学习进度后期不断更新哟!!!) 一.python基础 1.python基础--python基本知识.七大数据类型等 2.python基础 ...
- KMP算法,你想知道的都在这里!
简洁 我相信很多人都听说过KMP算法(PS:在上数据结构的时候,这个算法自始至终都没想明白) 大家也知道KMP算法是用来寻找目标子串的算法,但是都没有真正搞懂KMP.之前,我也是如此,我疑惑的有: N ...
- 【高热FAQ】关于智慧康养物联网加速器 ,你想知道的都在这
摘要:从软硬件解决方案.设备接入到资源扶持,一文梳理智慧康养物联网加速器中ISV最关心的问题. 本文分享自华为云社区<[高热FAQ]关于智慧康养物联网加速器 ,你想知道的都在这>,作者:技 ...
- 你想要的都在这里,ASP.NET Core MVC四种枚举绑定方式
前言 本节我们来讲讲在ASP.NET Core MVC又为我们提供了哪些方便,之前我们探讨过在ASP.NET MVC中下拉框绑定方式,这节我们来再来重点看看枚举绑定的方式,充分实现你所能想到的场景,满 ...
随机推荐
- 二级py--day3
二级PY--day3 1.结构化程序设计方法主要原则:自顶向下.逐步求精.模块化.限制使用goto语句 2.三种控制结构:顺序.选择和重复(循环) 3.结构化程序强调:程序的可复用性 4.结构化程序设 ...
- laravel 7 登录
1:路由,展示登录表单 Route::group(['prefix'=>'day','namespace'=>'day18'],function (){ // 登录 Route::get( ...
- thinkphp 登录(未设置cookie+session)
<?php namespace app\Admin\controller; use think\Controller; use think\Loader; use think\Request; ...
- linux 配置redis密码
1.打开redis配置文件 vi /usr/local/redis/etc/redis.conf 添加requirepass 密码 将bind 127.0.0.1 ::1前的#去掉 保存退出 2 ...
- PHP高并发商城秒杀
1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...
- ASP.NET Core 6框架揭秘实例演示[22]:如何承载你的后台服务[补充]
借助 .NET提供的服务承载(Hosting)系统,我们可以将一个或者多个长时间运行的后台服务寄宿或者承载我们创建的应用中.任何需要在后台长时间运行的操作都可以定义成标准化的服务并利用该系统来承载,A ...
- [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑
[源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 目录 [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 1. 总述 2. 接口 2.1 ...
- SQL注入手册
英文版:链接: https://sqlwiki.netspi.com/ 中文版:链接: https://pan.baidu.com/s/1WWmjvYYnLC6_nItMVvUVig 密码: e98r ...
- kafka消费组创建和删除原理
0.10.0.0版本的kafka的消费者和消费组已经不在zk上注册节点了,那么消费组是以什么形式存在的呢? 1 入口 看下kafka自带的脚本kafka-consumer-groups.sh,可见脚本 ...
- 什么是不可变对象(immutable object)?Java 中怎么 创建一个不可变对象?
不可变对象指对象一旦被创建,状态就不能再改变.任何修改都会创建一个新的对象,如 String.Integer 及其它包装类. 详情参见答案,一步一步指导你在 Java中创建一个不可变的类.