基础-工程化带来了什么？

在前端领域，不仅仅是在平常的工作中，更在一些晋升，又或者是面试，经常听到前端工程化，具备前端工程化经验，那什么是前端工程化？``前端工程化又带来了什么？

在最开始学习前端时，是一个项目文件夹里包着一不同类型的文件夹。

到后面接触框架了，比如说vue，那项目的目录又不一样了。

从前面到后面，是什么让我们的工程结构发生这么大的变化，难道这些变化都是由框架带来的吗？很明显不是的。

一般我们学前端，学完html接着学css和js，学完了实践，就是做项目哈，用的就是前面的第一种结构。好了，会开发页面了，然后就开始使用框架了，使用命令创建vue或react项目，然后使用模版语法开始开发，写业务需求，增删改查，修改bug，然后摸鱼，等待新业务下来....，咳咳咳，扯远了，回归正传，那会儿应该由很多人那会儿有疑问，这些文件都是干嘛的，怎么生效的？

那这个过程就是跳级，那这两个之间还缺了一个点，那就是 工程化。工程化涉及的简直是方方面面。举个例子。

js 复制代码

<template>
  <div class="tables">
    <img :src="imgUrl" alt="" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const imgUrl = ref("../../assets/imgs/pic.jpg");

就这么图片引用，定义个图片地址，是可以访问得到的，不信看预览。

预览能拿到，但是页面就是拿不到，嘿，有趣吧，不信你试试。

那换一种引用，图片又能正常显示了。

html 复制代码

 <div class="tables">
    <img src="../../assets/imgs/pic.jpg" alt="" />
  </div>

大家都遇到过，大家都能说出是相对路径和绝对路径的问题，但是，这是为什么呢？跟工程化有关！这些小问题一堆，还有啊，比如优化，一些公司的项目启动都要好几分钟的时间（😌就是我们公司的项目），还有项目体积打包，啧啧，大，虽然是用了框架，但还是稍微大😑😑。

所以，工程化到底做了什么事呢？？？？🤔🤔😫😯，听大佬说是，工程化就是当一个项目上了一定的规模之后，出现的各式各样的问题，都需要工程来解决。工程化不是具体的一门技术，是一大堆技术的合集emmm😶 所以啊涉及的东西太多了，这个工程化不是一下就能搞懂的。后面慢慢地深入吧😫