写在前面的话
webpack是前端打包工具里的王者荣耀。
（一）打包，不止于webpack
前端打包工具还有Grunt,Gulp,Roleup等；
对比如下：
| 工具 | 适用模式 | 特点 |
|---|---|---|
| Grunt | MPA | 老牌打包工具，基于文件为媒介（运行慢，零散的脚本文件一当多起来就受到影响 |
| Gulp | MPA | 易学，基于 nodejs 的 steam 流打包 |
| Webpack | SPA | 目前最强大的打包工具，但是过于臃肿，如何单纯打包js不推荐 |
| Roleup | MPA | tree-shaking特性（针对es6，按需打包，多余的不要，目前（2018，vuex,react主流使用） |
（二）webpack的核心概念
- 入口（Entry）：
入口（Entry）表示webpack以哪个文件为入口起点开始打包，构建内部依赖
- 输出（Output）：
输出（Output）表示webpack打包后的资源bundles输出到哪儿去，以及如何命名
- 加载器（Loader）：
Loader让webpack能够去处理那些非JavaScript文件的资源（webpack自身只理解JavaScript）
- 插件（Plugins）:
插件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩一直到重新定义环境中的变量等。
- 模式（Mode）:
模式（Mode）表示webpack使用相应模式的配置
（三）webpack4和webpack5的对比
| 维度 | webpack4.X | webpack5.X |
|---|---|---|
| 版本 | 4.X | 5.X |
| 安装代码 | yarn add webpack@4.46.0 webpack-cli -D | yarn add webpack webpack-cli -D |
| script 配置 | 'dev':"webpack --mode development " | 'dev':"webpack --mode development " |
| 启动命令 | yarn dev | yarn dev |
| webpack-cli 版本 | 3.X | 4.X |
| 空项目-开发环境-构建时间 | 1.74s | 0.87s |
| 空项目-开发环境-main.js | 4KB | 1.24KB |
| 代码透视 | CommonJS 包模块（闭包） | （嵌套的）匿名函数；eval等 |
| 空项目-生产环境-构建时间 | 970 B | 41B |
| 空项目-生产环境-main.js | 1.85s | 0.73s |
| 打包原理 | polyfill.js | prepack（预编译）prepack.io/ |
参考链接
以上
写在最后
推荐一套TS全系列的教程吧。近期在提升TS，收藏了一套很不错的教程，无偿分享给大家 www.yidengxuetang.com/pub-page/in…
