模块化

首先想区分一下，工程化，组件化，模块化的区别，看着感觉都差不多，傻傻分不清楚

• 工程化与工具化

  工程化==工具化?，工程化并不仅仅于此，我觉得更好的理解是，工程化是一系列标准并由一套标准的工具链具体实现，
  工程化=标准+工具链实现
工具化，能用工具解决的用工具

• 模块化与组件化

  这两个概念更容易分不清，因为本来就很模糊，他们的差别体现在颗粒度上，一个button可以是一个模块，组件可以是多个button构成的button组件，类似于零件和一个构件的区别
  模块是按功能划分的单元，一个模块可以是实现某一个功能
组件可以是由多个模块组成，是可以单独运行系统的最小单元

进入主题，讲讲模块化

模块化的目的

• 避免命名冲突
• 便于依赖管理
• 利于性能优化
• 提高可维护性
• 利于代码复用

模块化方案

• CommonJS

针对的是非浏览器环境下的javascript开发，不适合浏览去环境开发，因为其一，CommonJS只能处理javascript资源，CommonJS引用模块都是同步阻塞式加载，无法实现异步加载模块。

• AMD/CMD

在CommonJS基础上扩展了几个功能

• 支持异步加载
• 可以处理JavaScript以外的资源
• 源码无需编译就可以运行浏览器环境

ES6 Module

不管时CommonJS，还是AMD/CMD，都存在几个问题

• 应用场景单一，无法跨环境与运行
• 构建工具不统一

eS6模块化，是语言层面的规范，跟环境没有关系，可以跨环境运行
虽然也是同步的，但是import()方法可以满足异步加载需求，webpack和babel已经支持
吧盆浏览器没有及兼容ES6 Moduel,需要构建工具进行编译

webpack中模块化构建

webpack支持CommonJS，AMD和ES Module三种，各自有各自的特性

• CommonJS用于node.js开发，本身不具备异步加载功能，借助webpack提供的API实现

  window.onload = require.ensure([],require=>{
  	const a = require(''./module.js)
  },'chunkname')
  

• AMD面向浏览器开发，支持异步，但在webpack中蹦年定义输出文件名称，导致AMD异步文件欠缺语义

• ES Module与CommonJs类似，也不支持异步加载，通过import()函数实现,需要通过特殊注释定义输出模块名称

  window.onload = inmport(
  /*webpackChunkName:"chunkname"*/
  './module.js').then(res=.{
  })