基于webpack5完成 工程化建设

194 阅读2分钟

前言

时隔多天我我也完成了第二阶段工程化建设的学习,经过这么多天的学习,我从一个对工程化一无所知的小白,到现在对工程化有了一些自己的想法。下面是我学完哲玄《大前端全栈实践》-前端工程化课程的一下分享。

前端工程化概述

  1. 前端工程化是指通过一系列工具和流程,将前端开发过程中的手动工作自动化,提高开发效率和质量。
  2. 工程化包括代码解析、依赖管理、模块打包、压缩优化等步骤,最终生成可在浏览器中运行的产物文件。
  3. 工程化的目标是使前端开发更加规范化、可维护和可扩展。

前端工程化的作用

  1. 前端工程化有助于提高开发效率,通过自动化工具减少手动操作,使开发者能够更专注于业务逻辑的实现。
  2. 工程化可以规范代码结构,避免重复劳动,提高代码的可维护性和可读性。
  3. 通过模块打包和压缩优化,可以减少文件体积,提高页面加载速度,提升用户体验。

前端工程化的基本模型

  1. 前端工程化的基本模型包括业务文件、解析引擎和产物文件。
  2. 业务文件包括view、js、css、less、sass、png等不同类型的文件,存放在不同的目录中。
  3. 解析引擎负责将业务文件解析成浏览器可识别的js、html和css文件。
  4. 产物文件是解析引擎生成的最终文件,存放在public目录下,可供koa等服务器渲染页面时使用。

解析引擎的工作流程

image.png

  1. 前端页面设计包括目录结构、组件库、工具库和入口文件。
  2. 目录结构应清晰明了,便于管理和维护。
  3. 组件库包含各种可复用的组件,提高开发效率。
  4. 工具库提供常用的工具函数和功能,简化开发过程。
  5. 入口文件是页面的主入口,依赖组件库和工具库。

webpack配置基类

code.png

总结

学习前端工程化虽然可以帮助我们实现前端开发的高效性和质量,但不应该盲目的使用现有的工程化方案, 而是应该了解工程化的本质。这里的 webpack 只是让我们要掌握整体思路,工作流程和思考性能优化方案,然后针对业务进行项目的工程化配置,均衡业务和开发需要。 如果你也想学习各种前端相关知识可以进入我们的知识星球。

3a9b3a5f3acf4051b818dd60600471ae.jpg