04.webpack构建工具

构建工具

• webpackwebpack 官网
• vite
• parcel
• esbuild
• snowpack
• gulp

webpack

• 把src中的源代码变为dist中的目标代码
• 分析依赖关系，把不同的东西交给不同的技术处理

webpack 的核心能力

打包压缩

• 去除空白字符

文件指纹

• 解决缓存问题
• 文件指纹其实就是在文件后面加一个 hash 值，
• 优点：
  • 文件不变的情况下，使用缓存，减少服务器请求
  • 文件变化的情况下，文件指纹也会发生变化，浏览器会请求服务器，替换最新 js 文件

开发服务器

• 启动开发服务器，浏览器会请求开发服务器，开发服务器在内存中打包，把打包结果响应给浏览器
• 开发服务器监听源码目录，源码发生变化重新打包，刷新页面