Webpack介绍
来源:互联网 发布:无锡欧润网络 编辑:程序博客网 时间:2024/06/07 02:11
1、什么是Webpack
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但这不用我们理会,因为 webpack 有着各种健全的加载器(loader)在处理这些事情。
总结一句:模块打包机
四个核心概念:入口(entry)、输出(output)、加载器(loader)、插件(plugins)。
2、为什要使用WebPack
1. 越来越多的使用JavaScript和一大堆依赖包。
2. 现代浏览器提供更广泛的接口。
3. 整页刷新的情况越来越少,甚至更多代码在同一个页面。(SPA)
为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
a:模块化,让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
c:scss,less等CSS预处理器
.........
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
4、优点
优点:模块化
在webpack看来一切都是模块!这就是它不可不说的优点,包括你的JavaScript代码,也包括CSS和fonts以及图片等等等,只有通过合适的loaders,它们都可以被当做模块被处理。
阅读全文
0 0
- webpack介绍
- Webpack介绍
- Webpack介绍及入门
- Webpack介绍及入门
- webpack部分插件介绍
- WebPack常用功能介绍
- webpack核心概念介绍
- WebPack 常用功能介绍
- WebPack 常用功能介绍
- Webpack简单介绍
- webpack模块加载介绍
- 一:webpack 介绍
- webpack--概念1--介绍
- webpack的基本介绍
- webpack 介绍 & 安装 & 常用命令
- webpack介绍、配置、使用
- webpack 介绍 & 安装 & 常用命令
- webpack入门(一)——webpack 介绍
- 开源全局配置中心XDiamond应用解析
- ZeroBraneStudio LUA IDE 推荐
- Docker学习总结(28)——Docker 容器健康检查机制
- java 注解用法
- 点击每个省份的并跳转到各自的界面
- Webpack介绍
- FPS手游《战地先锋》性能案例精讲
- 高通AR93XX QCA95XX系列CPU上调试32MB SPI Nor Flash
- Spring boot:WebSocket+SockJS+Stomp实现广播和点对点消息传送
- 深度学习进阶之路
- python中常见的字符串操作
- pandas或者sklearn中如何将字符形式的标签数字化
- Android检查更新下载安装
- C 语言的方法传值