目录
3、webpack 的构建流程是什么?从读取配置到输出文件这
5、webpack 与 grunt、gulp 的不同?(必会)
6、有哪些常见的 Loader?他们是解决什么问题的?(必会)
9、分别介绍一下 bundle,chunk,module 的作用是什么
11、是否写过 Loader 和 Plugin?描述一下编写 loader 或
1、什么是 webpack(必会)
1、基本定义
wbpack 是一个打包模块化 javascript 的工具,在 webpack 里一切文件皆模块,通过
loader 转换文件,通过 plugin 注入钩子,最后输出由多个模块组合成的文件,webpack 专注构
建模块化项目,webpack 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到
JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript 等),并将
其打包为合适的格式以供浏览器使用
2、webpack 的优点是什么?(必会)
1、专注于处理模块化的项目,能做到开箱即用,一步到位
2、通过 plugin 扩展,完整好用又不失灵活
3、使用场景不局限于 web 开发
4、社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源
扩展
5、提供了更好的开发体验
3、webpack 的构建流程是什么?从读取配置到输出文件这
个过程尽量说全(必会)
webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
1、
初始化参数
:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
2、
开始编译
:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行
对象的 run 方法开始执行编译
3、
确定入口
:根据配置中的 entry 找出所有的入口文件
4、
编译模块
:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模
块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、
完成模块编译
:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻
译后的最终内容以及它们之间的依赖关系
6、
输出资源
:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,
再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机
会
7、
输出完成
:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写
入到文件系统,在以上过程中,webpack 会在特定的时间点广播出特定的事件,插件在监听到
感兴趣的事件后会执行特定的逻辑,并且插件可以调用 webpack 提供的 API 改变 webpack
的运行结果
4、说一下 webpack 的热更新原理(必会)
1、基本定义
webpack 的热更新又称热替换(Hot Module Replacement),缩写为 HMR。这个机
制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。