webpack是什么?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
webpack作用:
构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力
1. 打包 (把多个文件打包成一个js文件， 较少服务器压力、带宽) 2. 转化 (比如less、sass、ts) 需要loader 3. 优化 (SPA越来越盛行，前端项目复杂度高， webpack可以对项目进行优化)
webpack构成:
1. 入口 entry 2. 出口 output 3. loaders 转化器 4. plugins 插件 5. devServer 开发服务器 6. mode
安装webpack:
先必须确保node环境已经安装
nodejs.org -> download -> 下一步安装
npm install webpack-cli -g OR yarn add webpack-cli -g
验证webpack环境已经ok?
webpack -v
开发环境 VS 生产环境
开发环境: (develepment) 就是你平时编写代码的环境 npm i jquery --save-dev npm i jquery -D 生产环境: (production) 项目开发完毕，部署上线 npm i jquery --save npm i jquery -S