面试整理之webpack

背景：大约从9月12日开始面试，到现在为止大约面了30余家公司，大厂小厂都有，岗位级别覆盖中级和高级前端，可以很明显看出webpack&构建工具是各个项目考察的重点之一，因此对webpack各个知识点作一些整理和归纳。

1）npm script

npm本身是node本身附带的npm包管理工具的一个内置功能，其功能点 为在package.json中使用scripts字段定义任务，提供了pre和post两个钩子，缺点是功能过于简单，无法方便管理多个任务间的依赖。

2）Grunt

进化版的npm script，有大量现成的插件封装常见任务，也可以管理任务间依赖，自动执行依赖的任务

优点： 1.灵活，只执行我们定义的任务

2.有大量已封装的插件可供使用

缺点：集成度低，需要写大量配置，无法做到开箱即用

3）Gulp

相当于Gulp的加强版，最大特点是引入的流的概念，配置简单

优点：好用不失灵活，可以单独构建也可以搭配其它构建工具，相比Grunt增加监听文件，读写文件，流式处理的功能

缺点：与Gulp一样，集成度不高，需要配置才能使用，无法做到开箱即用

4）Webpack

模块化的打包工具，在webpack中一切皆模块，通过loader转换文件，通过Plugin注入钩子，最后输出多个模块化组合成的文件。

优点：1.专注于模块化的项目，可以做到开箱即用，一步到位。

2.可以通过Plugin实现扩展，好用，且有灵活性

3.社区庞大活跃，有非常多紧贴业务的依赖于特性

缺点：只能用于模块化的项目，而一些非模块化的老项目就不适用了

5）Rollup

专注于js的模块化打包工具，提供了很多处理js的一些编译优化概念，如Tree Shaking和Scope Hoisting（当然这些概念也已经被webpack模仿和实现）。

. 1. entry（入口）

指示 webpack 应该使用哪个模块，来作为构建其内部依赖树的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值：./src/index.js

2. output（出口）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

3. module（模块）

module属性配置的是处理模块的规则，webpack原生内置支持处理的文件类型为js，json文件，在遇到对应的其它文件时，则需要对应处理的loader进行处理，module字段通过rule字段传入一个数组，通过正则匹配去在遇到对应类型的文件时使用对应的loader。

4. resolve（解析）

resolve属性用于修改拓展webpack解析资源依赖的规则，webpack内置了js模块化解析规则，会按默认的模块解析规则去寻找文件，但有时我们可以优化修改其寻找文件的规则。

5. plugins（插件）

plugins是一个数组，其接受的数组元素是为webpack增加各种拓展能力的插件的实例（因此都需要用new调用）。

6. devServer（调试服务器）

devServer是webpack提供的专门针对于项目代码开发环境的一个封装的服务器，可以提高开发效率

7. stats （统计输出）

webpack在打包编译的过程中会有一系列的输出打包情况的输出，stats负责配置对应的输出策略，以便于我们在不同情况下查看不同的打包输出信息

8. devtool（开发工具）

针对开发配置对应的source-map策略

9. externals（拓展）

externals负责告诉webpack，项目中使用了哪些不需要被打包的模块

10. target（目标）

target属性负责配置让webpack针对不同的环境构建出对应环境的代码，其默认值为 'web'（浏览器环境），可以针对node环境，webworker，electron打包出对应环境的代码。