这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
知识重点：理解什么是Webpack，什么是loader
什么是Webpack
本质上是一种前端资源编译，打包工具，可以将 Es Module 、 CommonJs 的语法处理成浏览器可以运行的代码，把文件相关联的依赖打包成一个 js 文件（多份资源文件打包成一个Bundle.js）。宗旨是一切静态资源皆可打包。
核心流程
- 入口处理
从'entry'文件夹开始，启动编译流程 - 依赖解析
从'entry'文件夹开始,根据‘requre'or'import'等语句找到依赖资源 - 资源解析
根据'module'配置，调用资源转移器，将png，css等非标准JS资源转译成JS内容
递归调用2，3，直到所有资源处理完毕
- 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
entry：用来指定webpack的依赖入口，entry可以是一个字符串（单入口文件），也可以是一个对象（多入口文件）
关于Webpack的使用方法基本就围绕“配置”展开，而这些配置大致可分为两类：
- 流程类
作用于流程中某个或若干个环境直接影响打包效果的配置项 - 工具类：
主流程之外，提供更多工程化能力的配置项
- 流程类配置 输入'entry''context'
- 模块解析 'resolve','externals'
- 模块转译 'module'
- 后处理 'oprimization' 'mode' 'target'
loader有什么作用
为了处理非标准JS资源，设计出资源翻译模块loader，将资源翻译为标准JS
webpack开箱即用只支持JS和JSON两种文件类型，通过loaders去支持其他文件类型并且把它们转化成有效的模块，并且可以添加到
loaders本身是一个函数，接受源文件作为参数，返回转换后的结果
在webpack中解析CSS，需使用css-loader webpack想要解析less，只需在解析CSS的基础上首先使用less-loader将less转换成CSS
