web前端工程化-3-构建工具和脚手架

为什么要转换

开发和维护的代码与运行需要的代码的不一致

• jsx sass <–> js css

• 构建工具

  • 定义:

    1. 哪种工程适合开发维护

    2. 那种工程更适合运行

    3. 如何转换(打包)

  • **没有明确标准 **–>构建工具差异

    • *webpack(必须要会)
    • rollup
    • esbuild
    • turbopack
    • snowpack
    • grunt
    • gulp
    • Rspack

webpack(对应问题)

1. 一切结尾模块
2. 传统架构
3. 层级

• js
  - png
  - js
  - less
  - png
  - css
  - mp3
  - css
  - gif
  • html

使用

1. 入口

   AST

2. 开发服务器 webpack serve node

3. 文件指纹

   • 缓存

4. css modules

5. 源码地图:对应关系

脚手架

• 工具

  • vue-cli
  • vite cra
  • umijs

• 功能

  1. 界面交互

  2. 工程模板