1. 什么是模块化

模块化是指将一个复杂的系统分解成多个模块的一种解决方案。

2. CommonJS

1. 核心思想：

  1.   - 通过required方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。

2. 优点：

  - 代码可复用于node.js环境下并运行，例如同构应用；
  - 通过npm发布的很多第三方模块都采用了commonjs规范;

3. 缺点：

  - 浏览器环境下无法运行，需要通过工具编译转换成标准的ES5。

3. AMD（Asynchronous_module_definition）

1. 核心思想：

  - 通过required方法来异步加载依赖的其他模块，通过define导出需要暴露的接口。

2. 优点：

  - 可在浏览器环境下直接运行，无需通过编译转换成标准的ES5。
  - 可异步加载依赖，可并行加载多个依赖
  - 代码可同时运行在浏览器及nodejs环境下

3. 缺点：

  - JS原生运行环境没有支持AMD，需引入AMD库后才能正常运行。<br />

4. ES6模块化

1. 核心思想：

  - ECMA提出的JS模块化规范，语言层面上实现了模块化，通过import导入，export导出。

2. 优点：

  - 成为浏览器和服务器通用模块的解决方案。

3. 缺点：

  - 无法直接运行在大部分js运行环境下，需通过工具编译转换成标准的ES5

5. 为什么使用构建工具：

1. 原因：

  - 前端某些新技术及框架的源代码无法在JS运行环境下直接运行，需通过构建工具转换成标准的ES5后才能直接运行。

2. 构建需要做的事（包括如下）：

  - 代码转换：将TS编译成JS，将LESS编译成CSS等。
  - 文件优化：压缩JS，CSS，HTML代码，压缩图片等。
  - 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
  - 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
  - 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  - 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  - 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

6.为什么使用Webpack：

  - 目前大多数团队在开发新项目时都会采用新技术，这此新技术几乎都会采用"模块化+新语言+新框架"，webpack为这些新项目提供一站式的解决方案。
  - webpack有良好的生态链和维护团队，能提供良好的开发体验及质量。
  - webpack被全世界大量的前端开发者使用和验证，能找到各个层面出现的问题及解决方案。