Webpack-模块化系统简述

模块化系统简述

---

目的

前端是基于多语言、多层次的编码和组织工作，同时，前端的交付基于浏览器，这些资源是通过增量加载的方式运行于浏览器端，如何在开发环境组织好这些碎片化的代码和资源，保证浏览器端快速、优雅的加载和更新，需要一个模块化的系统。

Webpack 中文网

---

概念准备

1. CommonJS 规范－服务器端

   在浏览器环境外构建 JavaScript 生态系统为目标而产生的项目；

   允许模块通过 require 方法同步加载所有依赖的模块；

   这种模式会在浏览器端阻塞加载，不能非阻塞端并行加载多个模块；

2. AMD 规范－Asynchronous MOdule Definition

   为浏览器环境而设计的，通过 define 函数将真正的执行函数定义在闭包中；

   // define(id?: String, dependencies?: String[], factory: Function|Object);define("module", ["dep1", "dep2"], function(d1, d2){    return ...;});require(["module", "../file"], function(module, file){    ...})

   将依赖的模块提前执行，依赖前置

   缺点：提高开发成本，模块定义方式的语义不畅；不符合模块化思维；

3. CMD 规范－Common Module Definition

   define(function(require, exports, module){    var $ = require('jquery');    var Spinning = require('./spinning');    exports.doSomething = ...;    module.exports = ...})

4. ES6 模块－新的模块化标准，推荐使用

   import "jquery";export function doStuff(){};module "localModule" {    ...}

解决方案

分块传输，惰性加载，应用到某些模块的时候再增量更新，较为合理；