每日五题（5）

1. webpack是做什么的

webpack是一种前端资源构建工具，一个静态模块打包器。可以使用webpack管理开发中的模块依赖，并编译输出模块们所需的静态文件。webpack可以很好管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件，让开发过程更加高效。
webpack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。

用于浏览器解析不了es6及以上的语法，无法编译less/sacc等，所以我们需要各种插件去es6编译es5，将less编译成css，则用webpack将这些插件组合在一起。
两大特色：
#code splitting 可以自动完成
#loader 可以处理各种类型的静态文件，并且支持串联操作

2. loader的作用是什么

在实际开发中，webpack默认只能打包处理以.us后缀结尾的模块，其他非.js后缀结尾的模块，需要调用loader加载器才能正常打包。
loader加载器的作用：协助webpack打包处理特定的文件模块。

• css-loader 可以打包处理.css结尾的文件
• less-loader 可以打包处理.less结尾的文件
• style-loader：将css添加到DOM的内联样式标签style里
• babel-loader 可以打包处理webpack无法处理的高级JS语法

3.什么是plugin

plugin是插件的意思，用于对现有的架构进行扩展，比如打包优化、文件压缩等。
在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。

loader与plugin的区别：
loader主要用于转换某些类型的模块，将A文件进行编译形成B文件，是一个加载器
plugin是插件，对webpack本身进行扩展，是一个扩展器。它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程。并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

4.什么是bundle，chunk，module

module，chunk，bundle 就是同一份逻辑代码在不同转换场景下的三个别称：
一开始直接写出来的是module，webpack处理时是chunk，最后生成出来浏览器可以直接运行的是bundle。

1. 手写后的代码无论是ESM还是commonJS或是AMD，都是module；
2. module源文件传入webpack进行打包时，webpack会根据模块依赖关系分割代码，生成chunk文件，webpack会对这个chunk文件进行操作；
3. webpack处理好chunk文件后，最终输出bundle文件，其中包含了经过加载和编译的最终源文件，可以直接在浏览器运行。

产生chunk的三种途径：
entry入口、异步加载模块、代码分割

5. commonJS的模块化和ES6的模块化有什么区别

在ES6之前，js没有模块体系之说，最主要使用的是CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6模块使用简单，称为浏览器和服务器通用的模块解决方案。

差异：

1. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
2. CommonJS模块是运行时加载（动态加载），ES6模块是编译时输出接口（静态化）。
3. CommonJS加载的是整个模块，即所有的方法全部加载进来；ES6可以单独加载其中的某个方法。
4. CommonJS中this指向当前模块，ES6中指向undefined。
5. CommonJS默认非严格模式，ES6的模块自动采用严格模式。