这是我参与「第五届青训营」笔记创作活动的第8天

前端工程化工具

webpack vite rollup gulp browserify

webpack 多份资源文件打包成一个bundle，支持babel eslint ts less sass

支持模块化处理css 图片等资源

支持hmr开发，tree-shaking,sourcemap,代码分离，持续监听持续构建

缓存性能监控日志代码压缩

webpack常见配置

module.exports里entry mode devtool:{hot,open，watch} output:{filename,path} devServer plugins

context(webpack运行时从哪个文件夹找资源

resolve externals跟模块解析有关

module跟模块翻译有关，定义loader

optimization mode target 最终的bundle文件相关

entry项目的总入口文件，output打包到哪里（出口）

webpack四步处理

babel-loader

@babel/preset-env 即处理js文件

babel/preset-react

babel/preset-typescript

自动生成index.html

tree-shaking优化对工具库类loadash有奇效

配置mode为production然后optimization中的useExports设为true开启tree-shaking

loader作用是将非js资源转化为标准js资源

链式调用支持异步执行

前端工程化四个意义提供模块化方案，兼容不同模块规范

语法转译产物质量（压缩，tree-shaking,降级）开发效率（热更新）

vite no-bundle开发，源文件无需打包，生产环境基于rollup打包bundler,性能高

浏览器对原生ESM逐渐支持，script标签加上type="module",可以使用ESM模块导入导出

vite的devServer 基于原生ESM提供模块化方案，开发时无需打包项目源代码，天然按需加载和利用文件级的浏览器缓存

编译基于esbuild，基于go开发的前端工具

vite默认集成很多loader和插件 (开箱即用）

生产环境tree shaking基于ESM的import/export语句依赖关系，与运行时状态无关

在构建阶段就将未使用到的代码进行删除

CJS的required就不能tree-shaking，因为require的参数可能依赖运行时计算的结果

在vite中tree shaking默认开启

依赖预打包

ESbuild编译TS/JSX，但是不支持类型检查和语法降级，所以生产环境用的是TSC

代码压缩也用esbuild

开发阶段模拟rollup插件机制，生产环境直接使用rollup

前端工程化 | 青训营笔记