webpack之看一遍就了解

Posted 2022-06-07 dasianer

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环境的服务器，这个服务器你可以按照自己的喜好（不存在的，都给我按需求设计来）来配置，比如你可以配置服务器启动的根目录，端口号啦，监听地址啦，服务器代理设置等等啦。