webpack本质上是一种前端资源编译，打包工具，多份资源文件打包成一个bundle，支持babel、eslint、ts、coffescript、less、sass，支持模块化处理css，图片等资源文件，支持HMR+开发服务器，支持持续监听、持续构建，支持代码分离，支持tree-shaking，支持sourcemap。 使用webpack步骤：1.安装npm i-d webpack webpack-cli2.编辑配置文件：entry定义当前项目入口，output：定义当前项目最终打包完放到哪里3.执行编译命令npx webpack。 核心流程～极度简化版 1.entry get start 入口处理 启动编译流程2.require/import dependencies lookup 依赖解析 根据require or import等语句找到依赖资源 3.moudle transform 资源解析 根据module配置， 调用资源转移器，将png.css等非标准js资源转译为js内容4.output combine assets资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的js文件。 模块化+一致性：支持对不同类型资源都用import or require这些语句去管理这些资源等与多个资源的合并打包。 怎么使用webpack：基本都围绕配置展开，1.流程类作用于流程中的某个or若干个环节，直接影响打包的效果的配置项，2.工具类：主流程之外，提供更更多工程化能力的配置项。 流程配置：输入：entry，context。模块解析：reslove，module，external。模块转译：module。后处理：optimization，mode，target。配置总揽：开发效率类：watch，devtool，devserver。性能优化类：cache，performance，日志类：stats，infrastructure logging。使用webpack处理css1.安装用loader定义用css- loader，style- loader，2，添加modlue：rules：用test来固定文件，用use去定义一个处理这个文件的loader序列。使用webpack-接入babel：把高版本的js代码转译成低版本的，1.安装依赖@babel/core@babel preset-env@babel- loader2.声明产物出口，output3.执行npx webpack。使用webpack-生成html:1.安装依赖htmlwebpackplugin插件2.声明产物出口，output3.执行npxwebpack。使用webpack中的hmr的意思是（hot modlue replacement）模块热替换：写的代码能立刻更新在浏览器上，并且浏览器不需要整个页面都刷新的，1.开启hmr，2.启动webpack核心配置是devserver中的hot设置为true，用style-loader和css-loader处理css文件还用到HTMLwebpackplugin插件，watch：truewebpack全持续监听文件的变化。使用webpacktreeshaking树摇用于删除没有实际用到的代码：将mode设置成production optimization，usedexport：true。其他工具：缓存，性能监控，日志，代码压缩，分包。
