webpack简介

Posted 2020-09-05 Lily

webpack是 前端资源模块化管理工具和打包工具；

原文参考：http://webpackdoc.com/usage.html

 

---

 

一、现有模块系统

1、CommonJS

特点：

（1）node.js遵循CommonJs，npm中有近20万个可以使用的模块

（2）同步加载所依赖的模块资源，阻塞加载，不能并行加载模块

（3）当前浏览器暂不支持同步加载模块

使用方法：

 

require(‘module‘);

require(‘../file.js);

exports.doStuff = function(){}

module.exports = someValue;

 

2、AMD  Asynchronous Module Definition (异步模块定义)

主要是一个接口 define(id?,dependencies?,factory)，在声明模块时指定所有依赖，并且要当做形参传入到factory（工厂）中，对于依赖的模块提前执行，依赖前置；

特点：

（1）适合浏览器环境异步加载模块

使用方法：

 

define(‘module‘,[‘dep1‘,‘dep2‘],function(d1,d2){

     return someExportedValue;

})

require([‘module‘,‘../file‘],function(module,file){})

 

3、CMD  Common Module Definition

与AMD相似，并与CommonJs和Node.js的Modules规范保持了很大的兼容性；

特点：

（1）依赖就近，延迟执行

（2）能在Node.js中运行

使用方法：

 

define(function(require,exports,module){

     var $ = require(‘jquery‘);

     var Spinning = require(‘./spinning‘);

     exports.doSomething = ...

     module.exports = ...

})

 

4、ES6模块

ECMAScript6标准增加了js语言层面的模块概念。

特点：

（1）面向未来的ECMAScript标准，原生浏览器端没有兼容

（2）属于全新的命令字，新版的Node.js才支持

二、webpack

特点：

（1）代码拆分，实现前端模块按需加载，分块传输，避免了传统模块系统极端的加载传输方式；（传统模块系统极端的两个加载传输方式：a、每个模块文件都单独请求，造成请求次数过多，导致应用启动速度慢；b、把所有模块打包成一个文件然后只请求一次，导致一次请求加载所有模块导致流量浪费、初始化过程慢；）

（2）通过loader转换器可以将各类资源转换为javascript模块，如：样式，图片，字体，html，less、sass、模板库多语言系统等等；

（3） Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。

（4） Webpack 还有一个功能丰富的插件系统。