webpack问题解答

1、webpack的核心思想是什么？

1）entry（入口）：一个可执行模块或者库的入口。起点或是应用程序的起点入口。请这个起点开始，应用程序启动执行。如果传递一个数组，name数组的每一项都会执行。动态加载的模块不是入口起点【简单规则：每个HTML页面都有一个入口起点。单页面应用（SPA）：一个入口起点，多页应用（MPA）：多个入口起点】；
2）output（出口）：指示webpack如何去输出、以及在哪里输出你的[bundle、asset和其他你所打包或使用webpack载入的任何内容]。output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中；
3）Loader（加载器）：文件转换器。加载器会实现2个目标：a、识别出应该被特定的加载器转换的文件；b、转换能够被添加到依赖图标的文件（并且最终打包）；
4）Plugins（插件）：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。参与整个打包过程，可以进行打包优化配置编译的变量等，辅助（压缩，混淆，代码分割等）。

2、webpack和rollup有什么区别？如何选择是使用webpack还是rollup?

webpack：拆分代码，按需加载；
Rollup：所有资源放在同一个地方，一次性加载，利用tree-shake特性来剔除项目中未使用的代码，减少冗余，但是webpack已经逐渐支持tree-shake。【https://rollupjs.org/guide/en/】
webpack相对来说拥有更大的社区支持，资源更加齐全，文档更加完整，有更完整的插件库，如热更新及web-server等；
结论
对于应用使用webpack，对于类库使用Rollup
如果你需要代码拆分（Code Splitting），或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么webpack是个很不错的选择。
如果你的代码库是基于ES2015模块的，而且希望你写的代码能够被他人直接使用，你需要的打包工具可能是Rollup。

3、webpack中的resolve.modules和resolve.alias有什么区别？

resolve.alias：创建import或require的别名，来确保模块引入变的更简单。
resolve.modules：告诉webpack解析模块时应该搜索的目录。绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。相对路径：通过查看当前目录以及祖先路径（即：./node-modules，../node-modules等等），类似于Node查找‘node-modules’查找。绝对路径：只在给定目录中搜索。

4、webpack是如何处理模块化的？

模块：在模块化编程中，开发者讲程序分解为功能离散的chunk，称之为模块。
webpack是通过模拟module，exports， require变量，将我们的模块代码打包成一个文件，让浏览器可以运行我们的模块代码。