Webpack是什么?
==Webpack是当下最热门的前端资源模块化管理和打包工具。==
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码隔离。通过loader的转换,任何形式的资源都可以视作模块,比如CommonJS模块、AMD模块、ES6模块、CSS模块、图片、JSON、Coffeescript、LESS等。
简单的来说,Webpack就是一个模块打包器,它对模块的依赖关系进行静态分析,然后把这些模块按照相应的规则放在不同的文件夹里assets。
==Webpack同时支持同步以及异步。==
webpack本身只能支持原生的JavaScript模块,但是loader转换器可以将各种资源转换成JS模块。
以前
以前,或者说我们初学代码的时候,基本是一个单页面,然后通过 <script>
标签来一个个加载JS文件,但是这种方式的缺点也很明显。
* 全局作用域下容易造成变量冲突
* 文件只能按照<script>标签的顺序来加载
* 开发人员必须解决模块之间的依赖关系
* 难以维护
现状
前端开发早已不是单纯的网页模式,现在类似于webapp,在现代的高级浏览器里,需要使用HTML5、CSS3以及ES6等更新的技术开发丰富的功能,更像一个单页面应用。
每一个视图通过异步的方式加载,这导致页面初始化以及使用过程中会加载越来越多的JS代码,这给前端开发的流程和资源组织带来巨大的挑战。
模块化的规范
CommonJS
CommonJS规范的核心在于,每个模块通过require方法来同步加载所依赖的其他模块,然后通过exports或module.exports来导出需要暴露的接口。
优点:
* 服务器端模块便于重用
* NPM中已经有将近20万个可以使用模块包
* 简单并容易使用
缺点:
* 同步的模块加载方式不适合浏览器
* 不能非阻塞并行加载多个模块
例子:Browserify
AMD
AMD是指Asynchronous Module Definition,只有一个主要接口define(),但是需要提前声明所有需要用到的依赖,简称依赖前置。
优点:
* 可以异步加载
* 可以并行加载
缺点:
* 阅读开发困难
例子: RequireJS,curl
CMD
CMD是指Common Module Definition,与AMD不同的是它是依赖就近,延迟执行,容易在node.js中运行。
例子: Sea.js和coolie
UMD
兼容AMD与CMD的语法糖
ES6模块
ES6的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,输入以及输出量。
例子: Babel
关于前端模块加载
多次加载,请求次数过多;单词打包加载,初始化慢。
分块加载,按需进行懒加载才是未来发展方向。