谈谈你对Webpack的理解
1.什么是Webpack？
webpack 是一个静态模块打包器。 当 webpack 处理一个应用程序时，它会递归地构建一个依赖图，其中包含应用程序所需的每个模块，然后将这些模块打包成一个或多个包。
Webpack就像一条生产线，经过一系列的处理过程（加载器）将源文件转化为输出结果。 该生产线上的每个加工工序职责单一，多个工序之间存在依赖关系。 只有当前加工完成后，才能交由下一道工序进行加工。 插件就像插入生产线的一个功能，在特定时间处理生产线上的资源。 webpack运行时会广播风暴。 插件只需要监听自己关心的风暴，就可以加入生产线，改变生产线的运行情况。
（资料图片仅供参考）
2. 能谈谈打包过程/构建过程吗？ 3、能谈谈后端操作的优化吗？
Webpack的打包流程/打包原理/构建流程？
webpack的运行过程是一个串行过程，其工作流程是将各个插件串联起来。
从命令行执行npxwebpack打包命令启动 1.初始化编译参数：从配置文件和shell命令中读取并合并参数 2.开始编译：根据上一步获取的参数初始化Compiler对象，加载所有配置的Plugins ，并执行对象的run开始编译。 3、确定条目：根据配置中的条目查找所有条目文件。 4、编译模块：从入口文件触发，调用所有配置的Loader来翻译该模块，然后找出该模块所依赖的模块，然后递归这一步，直到该入口所依赖的所有文件都翻译完毕。 5、完成模块编译：在步骤4中使用Loader翻译完所有模块后，得到每个模块翻译后的最终内容以及它们之间的依赖关系图。 6、输出资源：根据依赖关系图，组装成包含多个模块的chunk，然后将每个chunk转换为单独的文件并添加到输出列表中，根据配置确定输出路径和文件名，并输出。
在上述过程中，Webpack会在特定的时间点广播特定的风暴，插件监听到感兴趣的风暴后会执行特定的逻辑。
总结
初始化：从配置文件和shell命令中读取并组合参数，根据参数初始化Compiler实例，加载Plugin（注册所有配置的插件），调用Compiler实例的运行模式开始编译。 编译：从入口触发，串行调用每个Module对应的Loader对模块进行翻译，然后找出该模块所依赖的模块，递归编译。
从配置文件（webpack.config.js）中指定的条目开始解析该文件，构建AST句子树
根据依赖图，组装成包含多个模块的Chunk，每个Chunk又转换成文件输出。
不同的entry生成不同的chunk，动态导出也会生成自己的chunk。
Webpack中的加载器有哪些功能/加载器？
Loader是webpack中提供的一种处理多种文件格式的机制。 由于webpack只认识JS和JSON，Loader就相当于一个翻译器，对其他类型的资源进行预处理。 用于对模块的“源代码”执行转换。 加载器支持链式调用，调用顺序是从右到左。 **链中的每个加载器都会处理之前已经处理过的资源，最终将其转化为js代码。 加载器的预处理功能可以为JavaScript生态提供更多的能力。
常见的装载机有哪些？ less-loader：将less文件编译成css文件
在开发过程中，我们经常使用less预处理器来编译css样式，以提高开发效率
css-loader：将css文件转换为commonjs模块并加载到js中。 模块内容为样式字符串 style-loader：创建样式标签，将js中的样式资源插入到标签中，将标签添加到头部即可生效 ts-loader：打包编译Typescript文件的作用是什么插入？ 什么是/插件
Plugin的功能比较强大，主要目的是解决loader无法实现的事情，比如打包优化、代码压缩等。 插件加载后，会在webpack建立的某个时间点触发插件定义的函数，帮助webpack做一些事情。 实现webpack的功能扩展。
常见的插件有哪些？ html-webpack-plugin 处理 html 资源。 默认情况下，它会创建一个空的 HTML 并手动引入打包输出的所有资源（js/css）。 mini-css-extract-plugin打包的css在js文件中。 这个插件可以单独提取css clean-webpack-plugin。 每次打包时，CleanWebpackPlugin插件都会手动删除最后一个包。 Webpack插件的执行顺序（加载机制）是怎样的？ Webpack中Loader和Plugin的区别
通常说webpack就像一条生产线，它会将源文件经过一系列的处理过程（loader）转换成输出结果。 该生产线上的每个加工工序职责单一webpack构建目标，多个工序之间存在依赖关系。 只有当前处理完成后，才能交给下一道工序。 插件就像插入生产线的一个功能，在特定的时间处理生产线上的资源。 Webpack 在运行过程中会广播干扰。 插件只需要监听它所关心的扰动，就可以加入到这条生产线中，从而改变生产线的运行情况。
还是用前面的总结说一下Loader和Plugin分别是哪个
运行时间 1.loader在编译阶段运行 2.plugins在整个周期工作
Loader使用方法： 1.下载 2.使用插件： 1.下载 2.参考 3.使用
Webpack做了哪些优化方法？ 优化意味着什么？
如何使用webpack优化后端性能？ 问题是如何优化生产环境来提高webpack的构建率？问题是优化构建率
tree-shaking 删除未使用的代码优化后端性能/提高构建率
Tree-shaking是基于ESModule规范封装的DeadCodeElimination技术。 打包过程中，对项目中未引用的模块进行测量和标记，并删除未引用的模块，以提高创建率，减少程序运行时间。
使用Tree Shaking时需要注意什么？
1、默认mode=生产，生产环境默认开启tree-shaking功能。 2.模块代码需要使用ES6标准编译。 ES6 模块依赖是确定性的，与运行时状态无关。 3.尽量不要编写有副作用的代码。 例如编译立即执行函数，函数中使用外部变量。
关于副作用
如何利用webpack优化后端性能？代码压缩
按需加载
代码分割splitChunks-在优化配置项中配置
1.node__mudules中的代码可以单独打包成一个chunk输出（例如使用jqury？） 2.多入口chunk会被手动分析，看看是否有公共文件。 如果有，就会打包成单独的chunk，不会重复打包。
使用Dll发送包
一般情况下，node_module会利用dll技术打包成文件。 这些不经常更新的框架和库可以单独打包生成一个chunk。
延迟加载路线
代码中 import() 函数引用的所有模块都会被打包成一个单独的包，并放置在存储 chunk 的目录中。 当浏览器到达这行代码时，会手动请求这个资源，实现异步加载。
Webpack如何配置压缩代码？ 哪些是压缩的？
1、在优化配置项中将插件配置为压缩器进行压缩。 2.在插件中使用此插件进行压缩
js 压缩：借助 terser-webpack-plugin 插件 css 压缩：借助 optimize-css-assets-webpack-plugin 插件
删除控制台、注释、空格、换行符、未使用的 CSS 代码等。
如何提高webpack的构建速度？
想法1：减少需要创建的文件或代码的数量
HMR（HotModuleReplacement）模块热替换只是重新创建发生变化的模块——缩小开发环境中的处理范围：合理利用这两个属性exclusion：不需要处理的文件和include：需要处理的文件。 当第二次创建 babel 缓存时，会读取之前的缓存，只重新创建变化的文件并使用 Dll 发送 -> 方便按需加载包。
一般情况下，node_module会利用dll技术打包成文件。 这些不经常更新的框架和库可以单独打包。 生成chunk项目源码也需要进行拆分。 打包后的文件可以根据路由来定义 --> 如何实现路由的懒加载？ webpack中如何实现组件的异步加载？
想法 2：做出更多改进
多进程打包线程加载器，放在耗时加载器之前
进程启动和进程通信都有开销，而且工作时间比较长webpack构建目标，所以需要多进程打包。
发表评论