webpack学习(一) -- 基础概念及安装执行

很早就想学习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打包须要寻找入口文件和出口文件，固然，这些也是咱们人为可配置的，具体怎么配置呢？小女暂且休息一下，关注我，且听下回分解，拜拜~