关于webpack的知识点

一、什么是webpack?它的核心概念是什么？

webpack是现代JavaScript应用程序的打包工具

它的核心概念包括：

• 入口
• 输出
• loader
• plugin(插件)
• 模式
• 模块
• 依赖图

二、webPack与Grunt\Grulp有什么区别？

首先Grunt/Gulp是任务运行器，用来实现流程自动化的

webpack 是模块打包器，用来分析模块依赖关系并打包资源的 ；其次，webpack更加强大，支持模块化与代码分割

三、 说说webpack的构建流程？

1. 初始化参数：根据配置文件以及shell语句读取参数
2. 创建编译实例：根据上一步的参数，初始化compiler对象，它是整个构建过程的核心调度者
3. 确定入口文件:根据配置的entry,确定所有的入口文件
4. 解析模块：对入口文件，调用匹配的loader对模块进行转译、
5. 转换模块：对非js资源，调用对应的 Loader 转换为 Webpack 能处理的模块
6. 完成编译：得到每个模块的转译内容与依赖关系
7. 生成chunk:根据配置或者动态导入，将模块分组为chunk
8. 输出资源：根据chunk调用template生成打包后的代码，将生成的文件内容写入文件系统中
9. 完成构建：触发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如何实现代码分割的？

1. 使用import动态导入语句，按需加载组件
2. 使用split-chunks-plugin:通过配置 optimizetion,splitChunks 手动分配

 十、如何提高webpack的构建速度？

1. 使用ceche-loader或webpack5+版本内置了持久化缓存，提高构建速度
2. 使用thread-loader做多进程的构建
3. 通过配置减小loader的处理范围：配置exclude 和include
4. 使用DllPlugin 预编译一些不常变动的模块

十一、如何优化webpack的打包体积？

1. 压缩资源：使用 terser-plugin压缩js代码；使用css-minimizer-plugin 压缩css代码；使用image-webpack-plugin 压缩图片
2. 使用tree-shaing，移除javaScript中未使用的代码
3. 使用import 实现懒加载；使用split-chunks-plugin提取公共代码
4. 按需加载组件库，避免全量引入大型库

 十二、什么是tree-shaking？它是什么原理？

tree-shaking：移除js中未使用的代码技术

工作原理：

•   通过es 6静态分析识别 import/export
• 标记未被引用的代码
• 在压缩阶段移除这些被标记的代码

十三、谈谈对webpack的HMR (热更新)的理解？

 首先热更新也叫热模块替换，它允许在运行时更新模块而不刷新整个页面

工作流程：

1. 在webpack dev server(简称WDS） 启动时，建立浏览器和WDS的websocket连接；（webpack dev server 是 webpack提供的开发环境服务器，通过命令 npm run dev 触发启动）
2. 监听到文件更新，重新编译；
3. webpack 给浏览器发送消息
4. 浏览器端通过jsonp获取到更新模块
5. 替换旧的模块，执行相关回调 

十四、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的新特性？

1. 持久化缓存，显著提高了构建的速度
2. 内置了资源模块，不需要再使用file-loader、url-loader
   1. asset/resource：代替file-loader，适用大文件如图片、字体等
   2. asset/inline:代替 url-load 适用于小图标，svg
   3. asset/source：代替row-loader 适用于文本.txt文件
   4. asset:根据文件大小智能识别，自动选择是inline还是resource,
3. tree-shaking优化增强：对于深层嵌套的模块，移除深层未使用的代码
4. 模块联邦：适用于微前端；运行不同的webpack构建的应用在运行时共享模块 

十六、模块联邦？是什么?（module-federetion）

 模块联邦：它可以使多个webpack构建的应用程序在运行时共享代码

它是webpack5+的新特性

应用场景：

        在微前端架构中 多个应用的公共共享库，运行时动态的加载远程模块

十七、webpack如何实现多页面应用？

在webpack.config.js中配置多个entry(入口），使用html-webpacl-plugin生成多个html文件 

十八、使用webpack打包时内存溢出了，怎么解决？

1. 在packge.json中，增加nodejs的内存限制
2. 使用ceche-loader或者升级webpack5持续化缓存
3. 减少loader的处理范围，配置exclude\include
4.  使用DllPlugin 进行预编译 不常变动的模块
5. 按需加载组件库，尽量避免全量引入大型库

十九、如何分析webpack的打包结果

在config.js中配置stats或者使用webpack-bundle-analyzer 进行可视化分析

从三个方面：

打包的体积：哪些文件大，是否有冗余代码

依赖关系：哪些模块被重复打包

构建性能：哪些插件或者loader耗时最长