这是我参与【第五届青训营】伴学笔记创作活动的第四天
Webpack本质上是一种前端资源编译，打包工具。
通过不同的后缀名，添加不同的loader处理文件
核心流程有：
1. 入口处理
从’entry’文件开始，启动编译流程
2. 依赖解析
从’entry’文件开始，根据’ruquire’ or ‘import’ 等语句找到依赖资源
3. 资源解析
根据 ‘module’ 配置，调用资源转移器，将png，css等非标准JS资源转移为JS内容
4. 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
用test过滤文件，找符合要求的文件
用use定义一个处理文件的loader
借助HMR（模块热替代）可以直接将代码修改后的结果直接反应在浏览器上，不用刷新浏览器
开启HMR：
module.exports={
devServer:{
hot:true}};
Tree-Shaking
开启tree-shaking：
-
’ mode:”production” ‘
-
‘optimization.usedExports:true’可以将未用到的代码删除掉
认识Loader：链式调用（前面的输出等于后面的输入）
less-loader：实现less=>css的转换
css-loader：将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
style-loader：将CSS模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签，注入html5中
通过本次学习，我知道了webpack的核心流程以及它的基本应用，基本了解了webpack是如何对文件进行编译转译的过程，并且知道了它主要是通过loader来对不同的文件进行转译来转换成浏览器可以识别的JS文件的，也知道了在以后的工作生活中我可以使用HMR模块热替代来让我的前端页面不用刷新实时更改效果，这将极大的方便我以后的前端页面的编写。
