twenty

前端开发：

模块化（js、css、资源），

组件化（复用现有的UI结构，样式，行为），

规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理），

自动化（自动化构建、自动部署、自动化测试）

 

什么是webpack

前端项目工程化的具体解决方案

主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处：工作重心放在具体功能的实现上，提高开发效率和项目的可维护性。

ps：Vue，React等前端项目，基本上都是基于webpack进行工程化开发

 

-S = --save

dependencies（从头到尾都会用到（开发到上线））

 在项目中安装webpack

-D = --save-dev

npm install webpack@5.42.1 webpack-cli@4.7.2 -D 记录到devDependencies（只在开发阶段用到）

 

配置webpack

创建webpack.config.js的webpack配置文件

modole.exports = {

mode：’‘//development和production

}

在package.json的scripts节点下，新增dev脚本

“scripts”：{

“dev”：“webpack”//script 节点下的脚本，可以通过npm run 执行，例如npm run dev

}