这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
前端工程化
- 模块化（js的模块化、css的模块化、资源的模块化）
- 组件化（复用现有的UI结构、样式、行为）
- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
什么是webpack
webpack是前端项目工程化的具体解决方案
它可以提供方便的前端模块化开发支持并且代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等功能
这种方案可以令程序员把工作的重心放到具体功能的实现上，提高了前端的开发效率和项目的可维护性
优点：
可以多份资源文件打包成一个Bundle
支持Babel,Eslint,TS,CoffeSoript,Loss,Sass
支持模块化处理css,图片等资源文件
支持HMR+开发服务器
支持代码分离
如何使用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 页面，自动注入了打包的文件
loader
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。
css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
