js知识点 掘金_关于webpack4的14个知识点,童叟无欺
没有什么比时间更具有说服力了,因为时间无需通知我们就可以改变一切。
最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpack4的一些基础知识点,下一篇将会配置一个优化到极致的react脚手架,也希望大家能够持续关注,配置webpack就是优化优化再优化,哈哈~
酒壮怂人胆,我学这个的办法基本就分3步:
- 首先,将这些必要的配置,以及某些loader,某些插件,像语文课文一样默读,并背诵(这一步最重要)
- 动手去实践,去试错
- 理解其原理
好了,正式开始
前言
Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
- Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。
- Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
- Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
- Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
- Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
1. 从0开始配置结构
- 初始化项目结构
2. 配置webpack.config.js
- 在项目根目录新建webpack.config.js
3. 配置开发服务器
4. 打包js
5. 支持ES6,react,vue
6. 处理css,sass,以及css3属性前缀
处理css
动态卸载和加载CSS
style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css
比如实现一个点击切换颜色的需求,修改index.js
处理sass
提取css文件为单独文件
7.产出html
8. 处理引用的第三方库,暴露全局变量
webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库
9. code splitting、懒加载(按需加载)
说白了就是在需要的时候在进行加载,比如一个场景,点击按钮才加载某个js.
10. JS Tree Shaking
11. 图片处理
12. Clean Plugin and Watch Mode
清空目录,文件有改动就重新打包
13. 区分环境变量
14. 开发模式与webpack-dev-server,proxy
到这里基本就结束了,觉得有帮助,不妨点个赞,不足之处,还望斧正~
有喜欢的小伙伴们 可以动手关注下哦 我是搬运工 哪里需要搬哪里。
作者:张不怂
链接:https://juejin.im/post/5cea1e1ae51d4510664d1652
来源:掘金
js知识点 掘金_关于webpack4的14个知识点,童叟无欺相关推荐
- 关于webpack4的14个知识点,童叟无欺
没有什么比时间更具有说服力了,因为时间无需通知我们就可以改变一切. 最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpa ...
- js知识点 掘金_掘金js
js的基本类型有哪些?引用类型有哪些?null和undefined的区别. 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种) Object是引用类型嘛?引用类型和基 ...
- 4十4十4写成乘法算式_小学数学二年级下册数学1-4单元知识点复习提前准备才能考的更好...
期中考试快到了,小学数学二年级下册1-4单元知识点复习,为考试做准备! 第一单元数据收集与整理 1. 收集数据的方法: (1) 民意调查:如投票选举. (2) 实地调查:如现场观察,收集,统计数据. ...
- css就近原则_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- Python科学计算库核心知识点总结_代码篇(ML/DL依赖语法)
Python科学计算库核心知识点总结_代码篇(ML/DL依赖语法) ...
- iOS 开发者一定要知道的 14 个知识点
本文讲的是iOS 开发者一定要知道的 14 个知识点, 作为一个 iOS 开发者(现在对 Swift 中毒颇深 ).我从零开始创建应用.维护应用,并且在很多团队待过.在我的职业生涯中,一句话一直响彻耳 ...
- css为什么要用浮动_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- [JS 分析] 天_眼_查 字体文件
0. 参考 js分析 猫_眼_电_影 字体文件 @font-face 1. 分析 1.1 定位目标元素 1.2 查看网页源代码 1.3 requests 请求提取得到大量错误信息 对比猫_眼_电_影抓 ...
- 初中数学503个必考知识点_初中生物必考知识点总结_生物必考知识点指南
初中生物看似简单,却为以后的生物学习奠定了基础知识,初中生物必考知识点有哪些?以下是小编收集整理的一些关于初中生物必考知识点总结_生物必考知识点指南,作为参考,希望你喜欢. 基因 概念:DNA分子很长 ...
最新文章
- linux mysql 5.7 双机热备_2017年5月5日 星红桉liunx动手实践mysql 主主双机热备
- js中推断浏览器类型
- Coverage analysis in AIE
- html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
- php重复点击按钮无效,完美解决UIButton按钮重复点击、多次响应的问题
- 解决the resource is not on the build path of a java project
- 程序员平均月薪过万,想当程序员的话,大学学那些专业会更好呢?
- Python 集合定义及运算
- redis 3.0.0 linux下载,CentOS7安装配置redis-3.0.0
- 使用lockcop软件检测c++死锁
- C# Aspose 去除水印 亲测有效!!!(有效测试时间:20220806)
- cmd代码表白_520你还不敢表白吗?
- STM32+L298N+PWM可调速小车(四驱)
- bigemap功能介绍,视频教程
- 逃脱只会部署集群系列 —— jenkins和gitlab的部署联动推送
- 如何用python群发工资条
- 51单片机实战教程之C语言基础(五 C语言函数及其定义)
- 您不知道Android的ES File Explorer可以做的19件事
- 【NOIP模拟赛】小猫爬山
- WEB基础与前端开发--课程表页面的设计
热门文章
- Matlab编程序设计数字滤波器
- 从源码分析DEARGUI之add_selectable
- ENAS pygraphviz 的替换之路
- Windows下编译 Hadoop
- 使用jpmml-sparkml-executable生成PMML模型文件
- 智领新时代 慧享新生活 —— CITE2018新闻发布会在北京召开
- 老男孩Linux运维第41期20170924开班第五周学习重点课堂记录
- The PNP sensor:- This is a sensor who...
- C#数组排序(按列)
- J0ker的CISSP之路:复习-Information Security Management(4)