声明 本教程整理于互联网

webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如CommonJs模块、 AMD 模块、 ES6 模块、CSS、图片、 JSONCoffeescript、 LESS等

一、模块系统的演进


  • 模块系统主要解决模块的定义、依赖和导出,先来看看已经存在的模块系统





    • 这是最原始的 javascript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口,典型的例子如 YUI

    • 这种原始的加载方式暴露了一些显而易见的弊端

      • 全局作用域下容易造成变量冲突
      • 文件只能按照