webpack学习笔记- 介绍篇

什么是webpack?

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具,他将根据木块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对于的静态资源。也就是说,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。这些文件处理压缩成线上的版本,压缩处理后,文件结构变得清晰,仅有一个html和一个js文件。

webpack.png

为什么要使用webpack?

代码拆分

webpack有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

Loader

webpack本身只能处理原生的Javascriot模块,但是loader转换器可以将各种类型的资源转化成Javascript模块。它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过require来加载任何类型的模块或文件,比如coffeeScript、JSX、LESS或图片。

智能解析

webpack有一个智能解析器,几乎可以处理任何第三方库,无论他们的模块形式是ComnonJs、AMD还是普通的JS文件。甚至在加载依赖的时候,允许使用动态表达式require("./template/" + name + ".jade")。
插件系统
webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的webpack插件,来满足各式各样的需求。

快速运行

webpack使用异步I/O和多级缓存提高运行效率,这使得webpack能够以令人难以置信的速度快速增量编译。

怎样使用webpack?

点击webpack学习笔记- 入门篇具体查看

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,202评论 40 247
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,226评论 7 35
  • 我毕业了,和大多数学生一样,怀揣着害怕与憧憬混合的复杂心境踏入一家商业公司做策划。加班是常事乃至于一个月可以休息四...
    三余君阅读 420评论 0 2