JS模块化与项目构建

JS模块化与项目构建

1)谈谈你对js模块化的理解

1)当工业级的项目开发的足够大的时候，如果将所有的js代码定义在一个js文件的话，使得复杂度提升，后期维护难度加大。
2)如果将一个大的js文件根据一定的规范拆分成几个小的文件的话将会便于管理，可以提高复用性。
3)模块化在项目中十分的重要，一个复杂的项目肯定有很多相似的功能模块，如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”，如果每个人有各自的写法，那么肯定会乱套，所有会引出模块化规范的使用
4)常用的JavaScript模块化规范有四种： Commonjs， AMD(require.js), CMD(sea.js), ES6模块化

2)区别CommonJS和ES6模块化

1. CommonJS是服务器端模块的规范，Node.js采用了这个规范。但目前也可用于浏览器端，需要使用Browserify/webpack进行提前编译打包.
2. ES6模块化规范专门针对于浏览器端，但目前浏览器支持不是很好(只有Chrome浏览器支持), 也需要使用Browserify进行打包
3. 暴露的方式和暴露的本质：

1、commonjs暴露的方式

• module.exports = value;
• exports.xxx = value;
• 暴露的本质是exports对象
  2、ES6中暴露的方式
• export xxx （常规暴露，暴露的本质是对象，接收的时候只能以对象的解构赋值的方式来接收值）
• export default （默认暴露，暴露任意数据类型，暴露什么数据类型，接收什么数据类型）

3)说说你对项目构建的理解

1). 构建项目到底做些什么
编译项目中的js, sass, less, stylus
合并js/css等资源文件
压缩js/css/html等资源文件
JS语法的检查
2). 构建工具
作用: 简化项目构建, 实现自动化构建
常用: grunt/gulp/webpack

4)区别webpack与gulp/grunt

1). webpack是一种模块化打包工具，主要用于模块化方案，预编译模块的方案。
2). Grunt/Gulp是非模块化打包工具, 是工具链，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作

5)webpack的核心概念

Entry：入口，Webpack进行打包的起始点(文件)
Output：出口，webpack编译打包生成的bundle(文件)
Loader：模块加载(转换)器，将非js模块包装成webpack能理解的js模块
Plugin：插件，在 Webpack 构建流程中的特定时机插入具有特定功能的代码
Module：模块，在 Webpack眼里一切皆模块，默认只识别js文件, 如果是其它类型文件利用对应的loader转换为js模块
Chunk/bundle：代码块/束，一个 Chunk 由多个模块组合而成, 最终浏览器执行的是webpack打包生成的chunk文件

6)webpack配置文件的整体结构

module.exports = {
  entry: '',
  output: {},
  module: {rules: []},
  plugins: []
}

7)webpack模块化打包的基本流程

1> 连接: webpack从入口JS开始, 递归查找出所有相关联的模块, 并连接起来形成一个图(网)的结构
2> 编译: 将JS模块中的模块化语法编译为浏览器可以直接运行的模块语法(当然其它类型资源也会处理)
3> 合并: 将图中所有编译过的模块合并成一个或少量几个bundle文件, 而浏览器运行是打包生成的bundle文件

8)比较loader与plugin

1). loader: 用于加载特定类型的资源文件, webpack本身只能打包js, 如果打包css就需要css-loader/style-loader, 如果打包图片就需要file-loader
2). plugin: 用来扩展webpack其它方面的功能, 如生成页面需要html-webpack-plugin, 压缩js需要uglifyjs-webpack-plugin

9)webpack打包后文件体积过大怎么办

异步加载模块（代码分割）；提取第三方库（使用cdn或者vender）；代码压缩；去除不必要的插件；去除devtool选项等等

10)webpack的Tree-shaking是什么?

Webpack在打包js模块时, 会将模块中向外暴露但没有被使用的功能从打包文件中移除
2个前提:
必须是使用ES6的export向外暴露的
必须进行JS的压缩处理