前端构建项目工具

1. HMR 概述 2. 如何启动 HMR (自动 ? 手动) 3. 提供 HMR 的入口 4. 使用 HMR 实时更新样式 5. 第三方库 loader 对于 HMR 的支持

和 webpack 对比 webpack是一个大而全的项目打包工具, 区分的自然要更细一些; 而作为一个新生代的库打包工具，rollup显得更加小巧精炼，可以根据不同的业务适配和技术栈适配进行打包。

概述 什么是 webpack ？ webpack 到底做了什么？怎么从无到有搭建一个 webpack 项目

1. webpack 的打包模式 2. webpack 常用的输入配置（+参考链接） 3. webpack 常用的输出配置 （+参考链接）

1. 什么是 plugin 2. plugin 和 loader 的区别 3. 常用的 plugin 4. 如何自己写一个 plugin

1. 什么是 loader 2. 配置 loader 的方式 3. 内联配置 loader (单独启用、禁用 ...) 4. loader 的特性 5. 如何自己手写一个 loader

1.什么是 resolve 2. resolve 的参考链接 3. 常用的的 resolve配置选项

1. source-map 是什么，source-map 的作用 2.如何配置 source-map 3. source-map 的常见配置项 4. source-map 推荐配置

1. 什么是 webpack-dev-server 2. devServer 的配置语法 3. devServer 常见的配置参数

1. 什么是 Tree Shaking 2. Tree Shaking 的支持成都 3. 使用 Tree Shaking 需要注意什么 4. 如何配置 Tree Shaking

1. 代码分割的概念 2. 代码分割的方式 3. splitChunk 示例 4. 常用的 splitChunk 配置项

1. 初始化 webpack 依赖 2. 配置 webpack.config.js 3. 配置项目命令