webpack学习（1）

ee98dfc6ded90fd81e99f27770ac197a.png

刚开始接触到webpack是在某安全公司，可能平时的工作也不会涉及到修改打包文件，所以一直不太清楚webpack一些配置，流程和原理。知识总是在用的时候方恨少，哈哈...... 最近的工作会涉及到webpack，所以下定决心一定要拿下它。

一：webpack是什么
1. 把浏览器不认识的代码转换为浏览器认识的代码执行，这样我们就可以使用react，vue，es6，sass，less，typescript等来进行开发。
2. 简化开发复杂度，把复杂的程序细小化，模块化。

二：使用webpack
准备工作：
1. 在练习文件夹（exec_webpack）下面创建package.json文件，也可以使用npm init 命令来创建。（项目依赖webpack来打包，而package.json是一个定义了当前项目依赖模块，自定义脚本任务等的文件）
2.创建好package.json文件后，下一步就是安装webpack
安装命令：

//安装webpack
npm install webpack

这时候虽然webpack已经安装了，但是却并没有把依赖写入package.json文件中，这样如果别人克隆了我们的代码，在npm install的时候 ，并不会安装webpack。
改进：

npm install --save-dev webpack //安装最新的版本的依赖, 并且在版本号前面加上^符号

现在可以看到文件夹(exec_webpack)里有两个文件 一个是package.json,另一个是package-lock.json,那么package-lock.json是什么时候出现的呢。
package-lock.json是在运行npm install的时候自动生成的一个文件。npm安装包的时候，装的是当前包的最新的版本，这就导致不同时间，不同环境运行npm install命令安装的包的版本不一样，从而给我们的开发带来不必要的麻烦。package-lock.json就是用来解决这个问题的，它包含了明确的版本号。保证不同环境, 不同时间下安装的包的版本是一样的。

注： npm install 生成的package-lock.json 和 yarn命令安装生成的yarn.lock文件效果是不一样的。建议用yarn。