前端工程化

  • 四个现代化
    • ① 模块化（js 的模块化、css 的模块化、资源的模块化）
    • ② 组件化（复用现有的 UI 结构、样式、行为）
    • ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
    • ④ 自动化（自动化构建、自动部署、自动化测试）

webpack

webpack 是前端项目工程化的具体解决方案
官网： https://webpack.docschina.org/

安装和配置

  • 安装 webpack 相关的两个包： webpack@5.58.2 和 webpack-cli@4.9.0
  • 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置
  • 在 package.json 的 scripts 节点下，新增 dev 脚本如下
  • 在终端中运行 npm run build 命令，启动 webpack 进行项目的打包构建