也来说说webpack

入门

webpack,官方定位是一个模块打包工具,基础命令极其简单

JavaScript

webpack ./entry.js bundle.js

1

webpack ./entry.js bundle.js

在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.js文件。

其用法与RequireJS里面的r.js命令极其相似。

快速上手

如果一个新业务,想做一下JS的模块化管理,那么可以立即选择webpack了。

如果一个老业务,曾经用了RequireJS或者SeaJS,那么也可以选择切换webpack了。

如果想做一个库\框架去为生态提供服务,也可以立即选择webpack,他能自动配置最终生成的library.js文件支持AMD\CommonJS等模块化方案。

用好配置里面的resolve,改造一下原有的Grunt\Gulp流程,即可使用webpack,业务代码基本无需改造。

多种模块化打包加载方案对比:http://webpack.github.io/docs/comparison.html

其实对于老业务而已,仅仅将JS的模块化从RequireJS替换到webpack,其收益并不明显,仅仅是最后生成的JS文件要小一些而已。

进阶

如果单单从CLI模式中的提供的参数来看,webpack的能力也就到此为止了。但webpack的作者并非只想做一个AMD\CommonJS\ES6 Modules的协议实现。

webpack提供了一个Loader和Plugin的机制,让社区通过提交自己的Loader和Plugin,大大拓展了webpack的应用场景。

别忘了,webpack的REPL可是完整的nodejs,也就是说Grunt、Gulp能做的事情,webpack也能做(只是能做,不代表webpack擅长做)。

同时,通过各种Loader和Plugin,webpack还能打包样式、图片等资源文件,并按需将这些资源文件inline到html中。

与babel的勾搭

建议es-2015就先别折腾了,webpack本身编译速度,在我的MBP上面是50ms上下,但加入babel并使用es-2015语法转换后,编译耗时直接涨到700~800ms,这还仅仅是只有两个js文件的demo。

在webpack的roadmap里面,看到有对ES6 Modules进行支持的计划,我们还是静等吧。

欠成熟的Loader和Plugin列表

其最富有想象力、最能拓展的Loader和Plugin,她们的列表是竟然是人工维护的一份Github Pages。相对于其他社区来说,这块差了点。同时由于是手动维护的列表,其Loader和Plugin的质量,只能通过Github和npm中进行判断。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美团技术团队

消息队列设计精要

消息队列已经逐渐成为企业IT系统内部通信的核心手段。它具有低耦合、可靠投递、广播、流量控制、最终一致性等一系列功能,成为异步RPC的主要手段之一。 当今市面上...

89950
来自专栏Laoqi's Linux运维专列

大白话Docker入门(二)

22450
来自专栏大魏分享(微信公众号:david-share)

从CL210 OpenStack考试看Neutron网络

CL210考试环境 笔者在今年5月份参加了OpenStack CL210培训。但是对培训过程中实验环境的网络拓扑当时没有弄明白,后来看了一些资料,总算有了大概的...

38460
来自专栏FreeBuf

互联网公司WAF系统设计

0×01 WAF简介 WAF 全称是Web Application Firewall, 简单讲就是web防火墙, 是对web业务进行防护的一种安全防护手段。 ...

531100
来自专栏FreeBuf

看我如何发现微软Microsoft Translator Hub服务高危漏洞

因为微软公司部署有很多在线网站和服务,对漏洞挖掘者来说具备较广的攻击测试面,发现漏洞入选微软致谢榜的难度相对不大,所以我就把大把时间耗在了微软漏洞发现上。在我分...

11920
来自专栏大魏分享(微信公众号:david-share)

Istio如何同时实现Hytrix|Ribbon|Zuul|微服务安全的功能?:为微服务引入Istio服务网格(下)

78530
来自专栏java架构师

WCF学习笔记(一)

开篇,简单知识介绍: 最近开始用WCF,一直仅限于初级阶段,整理了下思路,深入研究一下。 开始时,在看一个叫Artech写的系列文章,结果。。。 1、长篇大作,...

28550
来自专栏ImportSource

微服务下持久化观念转变

过去当我们开发一个企业应用的时候,我们经常首先会考虑的是“我们怎么和数据库交互”?最近的一两年来,人们慢慢的开始转变了,可能要问“我应该用哪种类型的数据库?是用...

308100
来自专栏玄魂工作室

CTF实战25 二进制软件逆向分析工具及实战

该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

93710
来自专栏PingCAP的专栏

捕获和增强原生系统的可观测性来发现错误

在对 TiDB 进行 Chaos 实践的时候,我一直在思考如何更好的发现 TiDB 整个系统的故障。最开始,我们参考的就是 Chaos Engineering ...

9300

扫码关注云+社区

领取腾讯云代金券