2.前端工程化背景 · webpack打包

* * * ### 1.webpack為什么會誕生? [https://github.com/sokra——作者的githun——Java開發者](https://github.com/sokra%E2%80%94%E2%80%94%E4%BD%9C%E8%80%85%E7%9A%84githun%E2%80%94%E2%80%94Java%E5%BC%80%E5%8F%91%E8%80%85) * GWT(Google Web Toolkit)——有代碼分割的功能 * Webpack作者Pull request這個功能,其他打包工具的作者不關注 * Webpack誕生,Instagram使用維護 ### 2.前端的演化歷史 ![](https://box.kancloud.cn/1a2317a628288a915c36dd15b3b8683b_824x447.png) ![](https://box.kancloud.cn/fc22f1975a2ffe6f7fe8e1e1c3b684a9_830x304.png) * ### 前端庫的時代 ![](https://box.kancloud.cn/5a0adb7bd02f32373caa0bcd3dc56e58_595x358.png) >功能:1.DOM操作2.數據請求 - 前端框架的變化 ![](https://box.kancloud.cn/2c2bf1d8c61dd070e9137da91c49d6c2_832x336.png) ![](https://box.kancloud.cn/d3a5bd630a205f2d08de6ee01b9c5815_831x399.png) - HTML的發展 ![](https://box.kancloud.cn/00b8ad293002207975865d288e194564_830x430.png) - CSS的發展 ![](https://box.kancloud.cn/ec0957b9dcd46ec33cf0ebf836a786bd_828x503.png) ![](https://box.kancloud.cn/10329195dd56b48b175313b74dea8333_819x496.png) ![](https://box.kancloud.cn/2e6d05001da4285a69c8a14336948e4c_825x388.png) ![](https://box.kancloud.cn/0266e5cf6ac055b08349b7aed481a770_824x441.png) ### 3.前端為什么需要構建? * 開發的復雜度 * 框架的去中心化——可以通過cnpm install xxx安裝對應的模塊 * 語言編譯化 * 開發模塊化 ### 4.為什么需要Webpack ~~~ 1.vue-cli/react-starter/angular-cli 2.code-splitting 3.天生的模塊化 ~~~