邂逅Webpack

前端的发展

  • 互联网发展早期，前端只负责写静态页面，纯粹的展示功能，JavaScript的作用也只是进行一些表单的验证和增加特效。

    当然为了动态在页面中填充一些数据，也出现了JSP、ASP、PHP这样的开发模式。

  • 随着AJAX技术的诞生改变了前端的发展历史，使得开发者发现，前端的作用不仅仅是展示页面，可以管理数据以及和用户互动。由于用户交互、数据交互的需求增多，也让jQuery 这样优秀的前端工具库大放异彩。

  • 而现代的Web开发事实上变得更加多样化和复杂化。开发的多样性包括我们需要开发PC Web页面、移动端Web页面、小程序、公众号、甚至包括App，都属于前端开发的范畴。当然也包括一系列复杂性的问题。

前端开发的复杂化

  • 模块化开发
  • 使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
  • 实时监听文件的变化来并且反映到浏览器上，提高开发的效率；
  • 将代码进行压缩、合并以及其他相关的优化；

三大框架的脚手架

  • Vue
    • Vue-cli
  • React
  • Angular

webpack是什么

webpack is a static module bundler for modern JavaScript applications

  • bundler打包 ：打包工具
  • 静态的static：我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
  • 模块化：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等 webpack可以将它们转化成浏览器认识的代码
  • 现代的：为现代前端而服务

工作中使用webpack

  • 在开发vue react等项目时 需要进行一些特殊的配置 比如给某些项目结构起别名 让我们的项目支持sass、less等预处理

    器，希望在项目中手动的添加TypeScript的支持，都需要webpack

  • 在原有的脚手架上来定制一些自己的特殊配置提供性能：比如安装性能分析工具、使用gzip压缩代码、引用cdn的资源，公共

    代码抽取等等操作，甚至包括需要编写属于自己的loader和plugin。

Webpack和vite

  • 目前vue的项目支持vite 也同样支持Webpack
  • react和angular脚手架都没有支持
  • vite打包需要借助于rollup来完成

webpack在不断更新迭代

vite的核心思想并不是首创 很多思想和之前的snowpack是重合的

传统开发存在的问题

我们的代码存在什么问题呢？某些语法浏览器是不认识的（尤其在低版本浏览器上）

1.使用了ES6的语法，比如const、箭头函数等语法；

2.使用了ES6中的模块化语法；

3.使用CommonJS的模块化语法；

4.在通过script标签引入时，必须添加上 type=”module” 属性；

显然，上面存在的问题，让我们在发布静态资源时，是不能直接发布的，因为运行在用户浏览器必然会存在各种各样的兼容性问题。

我们需要通过某个工具对其进行打包，让其转换成浏览器可以直接识别的语法；