• webpack 是什么 ?


    什么是webpack ?

    webpack 是一种前端构建工具,前端静态资源打包工具。
    webpack 是以入口文件开始递归便利所有依赖,生成一个静态依赖图 - chunk文件。 再通过不同的loader对 文件进行编译处理,最终生成一个bundle文件输出。

    为什么要使用webpack ?

    复杂的JavaScript代码和一大堆依赖包, 原来 原生阶段,通过script标签引入,有时一个依赖 依赖另外一个依赖,直接引入方式会导致项目混乱不堪,而且都是暴露的全局变量,容易造成全局变量污染。
    所以为了简化开发,前端社区涌现出了很多好的实践方法。模块化开发(CMD,requerejs,ES6模块化)等,typescript 扩展js功能, sass 作为css预处理器。
    这些改进能大大提升我们的开发效率,但是利用它们进行开发往往需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐。所以就为webpack等构件打包工具的出现提供了需求。

    webpack 的特点,优点 ?

    基础入口文件的:webpack会基于入口文件进行静态资源分析和和打包。所以一般单页面应用就一个入口文件,多页面应用需要配置多个入口文件。
    基于模块化的:webpack看来,所有的文件都是模块化的文件。这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便webpack对模块进行组合和打包。经过webpack的处理,最终会输出浏览器能使用的静态资源。

    Webpack的优点是:
    专注于处理模块化的项目,能做到开箱即用一步到位;
    通过 Plugin 扩展,完整好用又不失灵活;
    使用场景不仅限于 Web 开发;
    社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
    良好的开发体验。

    webpack 和 grunt、gulp、rollup,parcel比较

    webpack、grunt、gulp 比较 :
    grunt、gulp 是基于任务的方式处理文件的,webpack是基于入口文件,通过递归遍历所有引用的静态资源的。
    grunt、gulp 的集中度不高,需要写很多配置文件才可以用,无法做到像webpack那样开箱即用。在功能上,灵活性上,处理es6模块化上webpack都有一定的优势。

    webpack 和 rollup 、 parcel 比较
    首先共同点:三个都是基于入口文件进行打包的。
    webpack 为处理资源管理和分割代码而生,可以包含任何类型的文件。灵活,插件多。
    ollup:用标准化的格式(es6)来写代码,通过减少死代码尽可能地缩小包体积。
    parcel:超快的打包速度,多线程在多核上并发编译,不用任何配置。

    一般经验上:对于复杂有很多依赖的应用使用 webpack进行打包,对于类库使用 Rollup打包,对于功能简单的应用可以使用小而美的parcel进行打包。

  • 相关阅读:
    软件工程第一次作业
    单调队列
    八皇后问题
    蓝桥-区间K大数查询
    putchar()和getchar()使用解析
    C++中的各种进制转换函数汇总及学习
    第五次团队作业
    第二次团队作业
    确定团队开发项目
    结对编程之设计电梯控制程序
  • 原文地址:https://www.cnblogs.com/honkerzh/p/14007722.html
Copyright © 2020-2023  润新知