webpack之看一遍就了解

webpack是什么呢?通俗点说它就是一个包裹整理小工。

某一天,你要出门,在家倒拾了半天,为的就是一身轻松的出个远门。结果你收拾了半天,都没打包好行李,你累了,将webpack喊到家里,对他说:“嗨,小工,我这有些活,你能帮我做下么?”webpack回答道:“可以可以,不过你要告诉我应该怎么做?比如从哪开始做起?毛巾放哪儿等等~~~”

于是你对小工交待一些话后就去休息了,休息好了眼前一亮,那整洁的包裹,blingbling发着光哪。

哈哈,开个玩笑,现在我们进入正题,来谈谈webpack这个小工的一些常见属性吧。

1、entry

打包的入口,就是小工开始工作的地方,一般是一个js文件。比如你让小工从床开始收拾,那么床就能当成entry了。记住哦:小工的类比并不适用于多入口的打包方式。

2、output

打包的终点,总之就是你要的文件。

3、loader

小工的基本技能,比如完成less到css的转换,完成jsx到js的转换等。记住,小工的技能都是存在npm的技能池子里面,你要用什么就得取什么,也就是说install。

4、plugins

小工的buff,当基本技能解决不了一些打包工作时,就要用到这个加成技能了,不过写法变了。比如我们常见的CommonsChunkPlugin插件,当你需要提升页面访问速度时就可以用到这个plugin,他可以将你代码中用到的公共模块抽取出来,存到一个或多个独立文件中去,这些文件的hash值一般试不变的,这样你在下次访问页面的时候就能直接从缓存里面取了。

5、devServer

顾名思义,就是dev环境的服务器,这个服务器你可以按照自己的喜好(不存在的,都给我按需求设计来)来配置,比如你可以配置服务器启动的根目录,端口号啦,监听地址啦,服务器代理设置等等啦。

猜你喜欢

转载自www.cnblogs.com/dasianer/p/11293734.html