🛠️前端工程化

在前端开发过程中，webpack 是一个必不可少的强大工具。它主要用于前端资源构建，进行静态模块打包。

在实际的项目开发中，基于框架提供的脚手架等工具，我们可以非常方便地实现监听文件变化，并自动打包、打包完成后再开启本地服务，通过浏览器访问打包后的页面。

在 webpack 中，plugin 可以帮助我们进行一些自动化操作，比如： 清除 dist 目录 拷贝静态文件至输出目录 压缩打包代码。

这里是 webpack 5 系列入门的基础篇。掌握 webpack 的最佳方式就是从零起步，基于 loader、plugin 一步一步去定制符合自己项目的模块打包功能。 ### 基础

在一个多人协作开发的前端项目中，我们需要遵循团队开发规范，保持一致的文件目录结构，避免出现在同一个项目中出现风格迥异的目录结构，不利于项目的维护。

Nexus Repository Manager 是一个仓库管理器，极大地简化了内部仓库的维护和外部仓库的访问，可用于搭建公司 maven、npm 内网仓库。

静态资源服务器(HTTP 服务器)可以将静态文件(如 js、css、图片）等通过 HTTP 协议展现给客户端。本文介绍如何基于 Node 实现一个简易的静态资源服务器（类似于 serve）。

公司的一个核心前端项目是使用 vue-cli 脚手架生成的，用得较为老旧的技术栈（Vue2 + Webpack4），项目启动和打包非常慢，组内的前端同学已经无力吐槽，亟待升级优化。

React 项目模板应该具备以下基础功能：代码规范化、commitlint、清晰的项目文件结构、mock 服务、统一的 CSS 方案等。