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

  • 相关阅读:
    echarts 立体图
    css 设置边框边角
    PS2020 快速设置文字渐变
    idea 2019 永久破解
    使用VUE+element ui 实现输入框 占位符自动补全功能
    纯css 设置隔行样式
    CSS 设置float:left 导致后面元素错乱问题
    c primer plus 4编程练习
    c语言中以八进制数表示字符、并输出
    c语言中printf()函数的返回值
  • 原文地址:https://www.cnblogs.com/dasianer/p/11293734.html
Copyright © 2020-2023  润新知