• webpack介绍


    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等

    webpack的官网是 http://webpack.github.io/ ,文档地址是 http://webpack.github.io/docs/

    市面已存在大量的模块管理和打包工具,为什么还重复造轮子,webpack有什么特色?

    这些已有的模块化工具并不能很好的完成如下的目标:

    • 将依赖树拆分成按需加载的块
    • 初始化加载的耗时尽量少
    • 各种静态资源都可以视作模块
    • 将第三方库整合成模块的能力
    • 可以自定义打包逻辑的能力
    • 适合大项目,无论是单页还是多页的 Web 应用

    webpack 特点

    代码拆分
    Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
    Loader
    Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
    智能解析
    Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。
    插件系统
    Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。
    快速运行
    Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

    总结下来其主要的优势:

    1. 按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新
    2. webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
    3. 能被模块化的不仅仅是 JS 了,能处理各种类型的资源。
    4. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
    5. 扩展性强,插件机制完善

    注意:本文摘抄自博客  http://www.cnblogs.com/sloong/p/5584684.html

  • 相关阅读:
    Socket编程实践(6) --TCPNotes服务器
    2014百度之星预赛(第二场)——Best Financing
    操作和维护经常使用的命令
    HDU 5073 Galaxy(Anshan 2014)(数学推导,贪婪)
    [Angular2] @Ngrx/store and @Ngrx/effects learning note
    [AngularJS Ng-redux] Integrate ngRedux
    [AngularFire2] Update multi collections at the same time with FirebaseRef
    [AngularJS] Write a simple Redux store in AngularJS app
    [AngularJS] Using an AngularJS directive to hide the keyboard on submit
    [Javascript] Validate Data with the Every() Method
  • 原文地址:https://www.cnblogs.com/wj19940520/p/6483211.html
Copyright © 2020-2023  润新知