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变量,将我们的模块代码打包成一个文件,让浏览器可以运行我们的模块代码。