webpack5使用

webpack的作用是什么

1.模块打包
不同模块的文件打包整合在一起，保证他们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
2.编译兼容,
通过webpack的loader机制，不仅能帮我们对代码做polyfill，还可以编译转换.less,.vue,.jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提升开发效率
3.能力扩展
webpack的plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

模块打包运行原理

webpack如何将这些模块合并到一起，并且保证其正常工作的。
webpack打包流程：
1.读取webpack的配置参数
2.启动webpack，创建compiler对象并开始解析项目；
3.从入口文件entry开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树。
4.对不同文件类型的依赖模块使用对应的Loader进行编译，最终转为Javascript文件。
5.整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进行达到敢于输出结果的目的。

文件的解析和构建是一个比较复杂的过程，在webpack源码中主要依赖于compiler和compilation两个核心对象实现。
compiler对象是一个全局单例，负责把控整个webpack打包的构建流程。compilation对像是每一次构建的上下文对象，包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。
每个模块间的依赖关系，则依赖于AST语法树，每个模块文件在通过Loader解析完成之后，会通过acorn库生成模块代码的AST语法树，通过语法树就可以分析这个模块是否还有依赖的模块，进而循环下一个模块的编译解析。

sourceMap

编写Loader的思路

webpack最后打包出来的成果是一份Javascript代码，实际上在webpack内部默认也只能处理JS模块代码，在打包过程中，会默认把所有遇到的文件都当作javascript代码进行解析，因此当项目存在非JS类型文件时，我们需要先对其进行必要的转换，才能继续执行打包任务，这也是loader机制存在的意义。

编写plugin的思路

loader负责文件转换，那么plugin便是负责功能扩展，Loader和plugin作为webpack的两个重要组成部分，承担着两部分不同的职责。webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务，从而实现自己想要的功能。
修改配置文件webpack.js为lg.webpack.js
在package.json中可以用webpack --config lg.webpack.js指定配置文件名称

-----css-loader
行内loader import ‘css-loader!../css/login.css’
配置文件中的loader

为什么需要loader

识别读取文章内容的时候就开始工作了，不是所有的文件都能用webpack处理，需要loader打包，不能将处理好的样式，放在页面上展示。css-loader需要style-loader
less-loader转换为css-loader再交给style-loader
loader执行顺序从后往前。
browserslistrc工作流程
postcss :javascript转换样式的工具
npm i postcss -D
postcss-loader postcss-pre-env可以兼容不同浏览器，处理兼容css样式的

webpack 的构建流程主要有哪些环节？

webpack是运行在node环境下，配置文件遵循commonjs规范，其配置文件从webpack.config.js中导出一个module，每找到一个Module，就会根据Module.rule里配置的Loader规则进行相应的转换处理，对module进行转换，对module进行转换后，再解析出当前module所依赖的module，这些module会以entry为单位进行分组，即为一个chunk，因此一个chunk，就是一个entry及其所有依赖的modu了合并的结果。最后webpack会将所有的chunk转化为文件输出output,在整个构建流程中，webpack会在恰当的时机执行plugin里定义的逻辑，从而完成plugin插件的优化任务。流程如下：
1.配置初始化
webpack会首先读取配置文件，执行默认配置
2.编译前准备
webpack会实例化compilation，注册plugins、resovlerFactory、hooks。
3.resovle前准备
webpack实例化compilation、NormalModuleFactory和ContextModuleFactory
4.resolve流程
解析文件路径以及inline loader和配置文件loader合并、排序
5.构建module
runLoader处理源码，得到一个编译后的字符串或buffer。将文件解析为ast，分析module间的依赖关系，递归解析依赖文件
6.生成chun

file-loader处理图片的

/**

• 打包图片：
• • img src
• • 使用 require 导入图片，此时如果不配置 esModule: false ，则需.default 导出
• • 也可以在配置当中设置 esModule: false
• • 采用 import xxx from 图片资源，此时可以直接使用 xxxx
• • background url
    */
    图片处理：
    file-loader 将资源拷贝至指定的目录，分开请求
    url-loader base64文件当中，减少请求次数
    url-loader内部也可以使用file-loader
    ast处理图片/图标字体
    loader就是用来转换的对
    plugin贯穿整个生命周期，删除，用插件生成模版，打包优化，数据共享

plugin：
clean-webpack-plugin 清除dist文件
html-webpack-plugin 创建html文件
definePlugin:定义参数值的插件
copy-webpack-plugin：拷贝插件

babel新特性语法兼容
presetenv并不是将所有新功能都可以
polyfill兼容性的补充操作
mode：开发模式
sourcemap ：映射关系在调试时候可以定位到源代码中的信息