这是我参与[第五届青训营]伴学笔记创作活动的第十三天
前端工程化
- 模块化（js的模块化、css的模块化、资源的模块化）
- 组件化（复用现有的UI结构、样式、行为）
- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
什么是webpack
概念：webpack是前端项目工程化的具体解决方案 主要功能：它能提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大的功能 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端的开发效率和项目的可维护性 注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的
webpack的基本使用
需要在终端运行命令，安装webpack相关的两个包然后进行配置
model的可选值
mode的节点的可选值有两个，分别是:
- development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快、适合在开发阶段使用
- production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
webpack.config,js
webpack.config,js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
webpack中的插件
html-webpack-plugin是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。 需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份。
- 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
- HTML 插件在生成的 index.html 页面，自动注入了打包的文件
webpack中的loader
- 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
- loader 加载器的作用：协助 webpack 打包处理特定的文件模块。
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
总结
今天学习了webpack的相关知识，发现自己还有很多的不足还需要继续改进。
