前端工程化介绍

1. 前端工程化是什么？

• 前端工程化就是通过各种工具和技术，提升前端开发效率的过程
• 前端工程化：转化工具、格式化工具、脚手架工具、压缩工具、自动化工具。。。
  
• 工程化不等于某个工具
• Powered by Node.js

2. 脚手架工具

• Yeoman 可以帮助开发人员创建项目的基础结构代码，可以创建很多框架的基础代码
  (1)全局安装yo npm install --global yo
  (2) 安装generator npm install --global generator-webapp
  (3) yo运行generator

mkdir project-name
cd project-name
yo webapp

(4) 启动应用 npm run start

3. 自动化构建

• npm scripts
• 源码-》生产代码
  
• 任务分为串行和并行 & 和 &&
• Grunt Gulp FIS

4. webpack打包工具

4.1 为什么要打包

• ES Module 的浏览器兼容性问题
• 模块文件过多导致频繁发送网络请求问题
• 资源文件模块化的问题

4.2 webpack原理

• 找到打包入口，找出依赖模块，形成依赖关系树
• 根据依赖树，找到目标文件，进行loader配置
• loader配置资源文件放入bundle.js中

4.3 loader原理

• loader是处理模块的解析器。

resolveLoader: {
    modules: ['node_modules', 'loaders'] // 先从node_modules中查找，没有从loaders文件夹中查找loader1.js
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['loader1']
      }
    ]
  }

5. vite

• 之前浏览器不支持模块化，所以需要用webpack打包后进行运行程序
• 现在浏览器支持模块化，不用打包，所以产生啦vite
• vite也不需要热更新