一、什么是webpack?它的核心概念是什么？
webpack是现代JavaScript应用程序的打包工具
它的核心概念包括：
- 入口
- 输出
- loader
- plugin(插件)
- 模式
- 模块
- 依赖图
二、webPack与Grunt\Grulp有什么区别？
首先Grunt/Gulp是任务运行器，用来实现流程自动化的
webpack 是模块打包器，用来分析模块依赖关系并打包资源的 ；其次，webpack更加强大，支持模块化与代码分割
三、 说说webpack的构建流程？
- 初始化参数：根据配置文件以及shell语句读取参数
- 创建编译实例：根据上一步的参数，初始化compiler对象，它是整个构建过程的核心调度者
- 确定入口文件:根据配置的entry,确定所有的入口文件
- 解析模块：对入口文件，调用匹配的loader对模块进行转译、
- 转换模块：对非js资源，调用对应的
Loader转换为 Webpack 能处理的模块- 完成编译：得到每个模块的转译内容与依赖关系
- 生成chunk:根据配置或者动态导入，将模块分组为chunk
- 输出资源：根据chunk调用template生成打包后的代码，将生成的文件内容写入文件系统中
- 完成构建：触发done钩子，通知插件构建完成；统计构建的信息（构建的耗时、体积等可以通过stats配置或者
webpack-bundle-analyzer可视化）
四、 常用的loader有哪些？
处理ES6代码：bable-loader
处理css:css-loader
处理ts:ts-loader
处理文件、图片：file-loader/url-loader
处理预处理器的：sass-loader/less-loader
五、常用的plugin有哪些？
生成html文件：htmlWebpackplugin
处理css:mini-css-extract-plugin\css-minimizer-plugin
清理构建目录：clean-webpack-plugin
热更新：hot-module-replacement-plugin
压缩css:optimize-css-plugin
六、loader和plugin有什么区别呢？
loader:它是一种转换器，对于非js的资源，用loader转换成webpack可以处理的模块
plugin:它是一种扩展器，可以扩展webpack的功能，在构建时的特殊时期执行操作
七、自定义一个loader
module.export = function(source){return source.replace('word','webpack')
}// loader是一个函数，接受文件内容，返回处理后的内容八、自定义一个plugin
class myPlugin {apply(compiler){compiler.hooks.done.tap('myPlugin',stats =>{console.log(stats,'编译完成')})}
}module.export = myPugin// plugin是一个类，内含apply函数，可以通过compiler.hooks访问webpack的生命周期钩子九、 webpack如何实现代码分割的？
- 使用import动态导入语句，按需加载组件
- 使用split-chunks-plugin:通过配置 optimizetion,splitChunks 手动分配
十、如何提高webpack的构建速度？
- 使用ceche-loader或webpack5+版本内置了持久化缓存，提高构建速度
- 使用thread-loader做多进程的构建
- 通过配置减小loader的处理范围：配置exclude 和include
- 使用DllPlugin 预编译一些不常变动的模块
十一、如何优化webpack的打包体积？
- 压缩资源：使用 terser-plugin压缩js代码；使用css-minimizer-plugin 压缩css代码；使用image-webpack-plugin 压缩图片
- 使用tree-shaing，移除javaScript中未使用的代码
- 使用import 实现懒加载；使用split-chunks-plugin提取公共代码
- 按需加载组件库，避免全量引入大型库
十二、什么是tree-shaking？它是什么原理？
tree-shaking：移除js中未使用的代码技术
工作原理：
- 通过es 6静态分析识别 import/export
- 标记未被引用的代码
- 在压缩阶段移除这些被标记的代码
十三、谈谈对webpack的HMR (热更新)的理解？
首先热更新也叫热模块替换，它允许在运行时更新模块而不刷新整个页面
工作流程：
- 在webpack dev server(简称WDS） 启动时，建立浏览器和WDS的websocket连接；（webpack dev server 是 webpack提供的开发环境服务器，通过命令 npm run dev 触发启动）
- 监听到文件更新，重新编译；
- webpack 给浏览器发送消息
- 浏览器端通过jsonp获取到更新模块
- 替换旧的模块，执行相关回调
十四、webpack中的source-map 是什么？
source-map 是一种将编译、压缩后代码映射回原始源代码的技术，它配置在webpack.config.js中，通过devtool字段指定
大概分为以下几个类型
eval、eval-source-map 、cheep-module、source-map、hidden-source-map
其中evel-source-map 适合在开发环境，source-map 适合生产环境需精准调试，nosource-source-map 适合生产环境保护源码隐私
十五、webpack5的新特性？
- 持久化缓存，显著提高了构建的速度
- 内置了资源模块，不需要再使用file-loader、url-loader
- asset/resource：代替file-loader，适用大文件如图片、字体等
- asset/inline:代替 url-load 适用于小图标，svg
- asset/source：代替row-loader 适用于文本.txt文件
- asset:根据文件大小智能识别，自动选择是inline还是resource,
- tree-shaking优化增强：对于深层嵌套的模块，移除深层未使用的代码
- 模块联邦：适用于微前端；运行不同的webpack构建的应用在运行时共享模块
十六、模块联邦？是什么?（module-federetion）
模块联邦：它可以使多个webpack构建的应用程序在运行时共享代码
它是webpack5+的新特性
应用场景：
在微前端架构中 多个应用的公共共享库，运行时动态的加载远程模块
十七、webpack如何实现多页面应用？
在webpack.config.js中配置多个entry(入口），使用html-webpacl-plugin生成多个html文件
十八、使用webpack打包时内存溢出了，怎么解决？
- 在packge.json中，增加nodejs的内存限制
- 使用ceche-loader或者升级webpack5持续化缓存
- 减少loader的处理范围，配置exclude\include
- 使用DllPlugin 进行预编译 不常变动的模块
- 按需加载组件库，尽量避免全量引入大型库
十九、如何分析webpack的打包结果
在config.js中配置stats或者使用webpack-bundle-analyzer 进行可视化分析
从三个方面：
打包的体积：哪些文件大，是否有冗余代码
依赖关系：哪些模块被重复打包
构建性能：哪些插件或者loader耗时最长
