| 概念 用 nodejs 实现的 前端工程化工具，运行在node环境中。 1）通过入口 js（默认src/main.js） ，打包成 能在页面中使用的 js，打包成html。分析依赖，将用到的js汇集起来。 2）本来只识别 js，但是可以通过 loader 管理其他资源，如css、img。 4) 插件：优化构建过程。一堆钩子回调，webpack在构建的过程，会在适当的时机调用这些钩子函数。 5）启动本地服务，展示打包后的文件 |
|
| loader 1）输入：非js资源 输出：js 一个最简单的loader |
|
plugin webpack-dev-server 在编译之后不会写入任何输出文件，而是将 bundle 文件保留在内存中，然后将它们作为可访问资源部署在 server 中，就像是挂载在 server 根路径上的真实文件一样。 代码分离：将一个js文件，打包为多个js文件，实现按需加载，并行加载， |
|
| babel（浏览器兼容） 概念：将ECMAScript 2015+的 js 代码转换为低版本的js。使得兼容浏览器。一坨工具链。用到了开源的工具。如@babel/core 1）代码转换：bebel利用一个个的js插件将 es6 及其以上的代码 转换成 es5，例如 @babel/plugin-transform-arrow-functions，等。 2）polyfill：增加垫片，增加浏览器环境中没有的功能。 常用的转换插件组成了 预设 preset。 |
|