很早就想学习webpack项目打包相关知识，因为对其不了解，在公司做项目，打包出错总是让我最头疼的问题，嗯...作为对webpack一窍不通的我，只能从最基础的概念学起啦~
概念
- 什么是前端工程化？
- 答：是根据业务项目的特点，在公司多人协作开发，总是需要一套固定的规范让开发者彼此的技术选型、代码规范、项目的构建发布都能保持一致,代码质量和效率都会因此增加。 ---这是我自己的理解，官方说法如下：
前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构 建发布等，用于提升前端工程师的开发效率和代码质量。
- 代码发布上线过程会经历什么？
- 答： 代码压缩、语法检查、图片合并、图片压缩等。
- 前端自动化构建工具都有那些？
- 答： Grunt、Gulp、Fis3(百度的)、Webpack(当前版本为webpack4)
- webpack中支持哪些模块规范？
- commonJs、AMD、ES6中import
** 巴拉巴拉一大堆汉字，小女写的有些头疼，当当当~终于来点实际的啦~**
全局安装webpack
安装工具：npm包管理工具
webpack4对node要求6.1.1以上版本
第一步
- 打开git命令窗口
第二步
- 输入安装命令
//webpack-cli是webpack中命令行接口工具
npm install webpack webpack-cli -g
对比webpack之前版本，webpack-cli是在webpack中，安装webpack就都安装下来了，从webpack4之后，webpack-cli被单独分离出来，所以一次要把两个都安装上
萝卜白菜，可有所爱
所以，全局安装完毕之后最好进行局部安装（在当前文件夹安装）一下，因为项目不同，对应依赖的webpack版本可能不同，局部安装可以避免全局安装使用统一的webpack版本出现的问题。
局部安装webpack
第一步
- 初始化当前项目
npm init //然后生成一个package.json文件
- 局部安装webpack
//--save-dev是指安装到当前开发环境下
npm install webpack webpack-cli --save-dev
- 安装完成
- devDependencie：package.json文件中多出了devDependencies部分，这里就包含了我们开发时用到的所有依赖包
- package-lock.json/node_modules：咦？这是我们发现，我们的项目文件夹中又多了package-lock.json和node_modules两个文件夹，其中 package-lock.json中是每个插件的版本号和下载路径，node_modules中是我们安装webpack时需要的依赖包
执行webpack
第一步
- git窗口执行输入执行命令
webpack
执行完后，发现，咦？报错啦，webpack执行不了了，找到error的地方，我们发现是不能找到入口模块'./src'，当然，此时我们项目里还没有src，只有node_modules、package-lock.json和package.json三个文件，为什么webpack要找src文件呢？
原因很简单，webpack作为构建工具，在使用前是需要我们去给它一些配置，告诉他该怎么构建，如果我们不做这类配置，webpack就会按照自己的意愿，执行自己默认的配置，去找当前项目src文件夹中的index.js文件作为入口文件啦~反正让他罢工估计是有点难~
第二步
- 满足webpack的需求（给项目增加src文件夹，在文件夹中创建index.js文件），再次执行webpack
咦？这时候我们又有新的发现，项目文件夹中增加了dist文件夹，里面有main.js文件，这个就是我们打包输出的出口文件夹啦~
未完待续...
知道webpack打包需要寻找入口文件和出口文件，当然，这些也是我们人为可配置的，具体怎么配置呢？小女暂且休息一下，关注我，且听下回分解，拜拜~
