1. webpack是什么？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

我们可以把webpack理解成一个主编，来出版读者(浏览器)要看的书。首先它要把各式各样的文章归类，分成不同的章节(模块)，然后再对里面的内容进行处理，比如有些英文、法文(Es6、TS、vue等)需要翻译成中文(JS、css、Es5),有些文章需要简短一点（代码压缩），这样一系列过程后呈现给读者可以容易理解的书籍。

2.为什么需要模块打包器？

1.有序的管理代码库

随着网页开发的丰富化和复杂化，庞大的代码库需要被有序地管理起来，模块化工具也就应运而生。

2.新框架必须经过转换才能在Javascript引擎里运行。

新框架如ES6、less、sass、vue、react，无法直接在现成的Javascript引擎里运行，必须经过转换。webpack可以提供转换功能。

3. babel又是什么？

babel是javascript语法的转译器，用来转换最新的JS语法，比如把ES6,ES7等语法最新的JS语法,babel转换后的代码是遵循commonJS规范的，而这个规范，浏览器并不能识别。为了将babel生成的commonJS规范的es5写法能够在浏览器上直接运行，就要借助webpack这个打包工具来完成，因为webpack本身也是遵循commonJS规范的。

4. webpack与babel的关系

webpack是一个打包工具，打包js文件，css文件，图片，html等等。在打包时需要将ES6等最新的JS语法最新的JS语法，这时就要用到‘babel-loader’。

5. webpack与别的打包工具相比，有什么优点？

由于前端工程师熟悉Javascript，Nodejs又可以胜任所有构建需求，所以大多数构建工具都是用Nodejs开发的。

常见构建工具对比：

Grunt

工作方式： 在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Gulp

工作方式与Grunt相同，Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。

Webpack

工作方式： 把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

区别：

gulp和grunt是流管理工具，通过一个个task配置执行用户需要的功能，如格式检验，代码压缩等。经过这两者处理的代码只是局部变量名被替换简化，整体并没有发生改变，代码并没有大量修改。

webpack则进行了更彻底的模块化打包处理，对模块语法规则进行转换。主要任务是突破浏览器的鸿沟，将原本浏览器不能识别的规范、各种各样的静态文件进行分析，压缩，合并，打包，最后生成浏览器支持的代码。更注重模块化。

可以这样理解，grunt和gulp简化了前端的代码操作。用户先配置自己需要的功能，用到某个功能时调用即可，整体代码改动不大。webpack要根据用户定义的配置文件将代码进行分割、编译、打包成浏览器可以识别的文件。webpack 是个十分强大的工具，它正在向一个全能型的构建工具发展，在很多场景下可以替代grunt和glup。

webpack的优点：

注于处理模块化的项目，能做到开箱即用、一步到位。
配置灵活和插件化扩展
社区生态丰富
官方更新迭代速度快

6. webpack中，module、chunk、bundle的区别？

参考

1.module、chunk、dundle区别 www.cnblogs.com/skychx/p/we…

webpack基础入门---易混淆概念｜ 8月更文挑战