开篇
在学习vue的过程中，刚刚开始我对vue与webpack一无所知。因为遇见一个问题一定要知道为什么，这是这样处理的，否则我并不能，深刻学习东西，甚至使用起来跟难受，就像高中中学习的化学一样，我总想问为什么是这个反应。一开始的化学老师每次讲完以后会说一句，不要去问为什么，我们只是发现的大自然的规律。有为什么的他就会简短的告诉我们，那段时间我的化学是学生时代最好的。
下面我将会记录自己的这webpack的学习过程
webpack的作用就是帮我们更好的实现，我们写的代码与浏览器之间尽可能的优化的关系。让浏览器更快更好的执行我们写出来的代码。这就是他的目标。只是他表现形式就是--使用过模块的形式，来完成这个目标。
首先我们需要看一个背景故事
在很久很久以前，dk 要开发一个前端项目，在计算机的某个旮沓地方建立了一个文件夹叫 dk_project，就称为这是一个“项目”了。 又过了很久，dk 离开了公司，来了位新同事，在接手 dk 工作的时候发现计算机上面的 dk_project 文件夹，因为没有任何明显的 标识，就被当成普通文件夹给 DELETE 掉了。 回到现代，随着 npm 的诞生，人们意识到建立一个项目目录不应该这么草率，于是乎规定， 如果某个文件夹被创建作为一个项目目录，那么它就应该包含一个 package.json 的文件。 package.json 文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等等数不清的好处
创建package.json
我会默认你已经装了node(如果并没有的话，去百度一下安装的方法),所以第一件事就是我们先创建一个文件夹。在文件夹中我们先执行一个命令（在你创建好的空文件夹中 按住shfit键 然后点击右键，你会发现 有一个叫‘在此处打开命令窗口（w）’,然后点击会出现 DOM）然后执行下面的命令行
npm init当你执行的过程中按下回车键就会发现，我们需要做一些交互的信息，使得更好的配置我们需要的package.json这个文件，下面是一些采纳数
命令行里会以交互的形式让你填一些项目的介绍信息，依次介绍如下：（不知道怎么填的直接回车、回车...）
- name 项目名称
- version 项目的版本号
- description 项目的描述信息
- entry point 项目的入口文件
- test command 项目启动时脚本命令
- git repository 如果你有 Git 地址，可以将这个项目放到你的 Git 仓库里
- keywords 关键词
- author 作者叫啥
- license 项目要发行的时候需要的证书，平时玩玩忽略它
你可以按照上面的意思，填写自己的需求
当完成了上面的文件创建之后，你会发现你的文件夹中会出现
你会发现出现了这样的一个文件。
webpack-cli命令
然后不急，打开命令行输入
npm install webpack-cli成功后你会看到下面这样
webpack.js的只用
要知道它的作用，我们就需要先知道里面的那些参数是做什么使用的
下面我看一个比较全的webpack.js文件
"private": true,
"dependencies": {
"antd": "^2.11.1",
"classnames": "^2.2.5"
},
"devDependencies": {
"axios": "^0.15.3",
"babel-eslint": "^6.1.2"
},
"bin": {
"dk-cli": "./bin/dk-cli.js"
},
"scripts": {
"start": "node index.js"
},
"engines": {
"node": ">=6.9.0",
"npm": ">=3.10.10"
}
"publishConfig": {
"registry": "http://gongsineibu/nexus/repository/npm-hosted/"
}1.
private属性可选字段，布尔值。如果 private 为 true，npm 会拒绝发布。
这可以防止私有 repositories 不小心被发布出去。
2.
dependencies与devDependencies问题一：dependencies 与 devDependencies 属性区别？
dependencies 指定了项目生产环境时所依赖的模块；
devDependencies 制定了项目开发环境时所依赖的模块。
问题二：为什么需要生产/开发两个环境？
举个最简单的例子：
在开发阶段，我们需要对开发的模块进行单元测试，这时在开发环境 devDependencies 下就要安装单元测试模块 Mocha。
在生产环境 dependencies，用户直接使用项目，此时项目的开发已全部完成。这时就不需要单元测试模块了，再加上只会影响性能。
3.
bin属性如果你需要使用 npm 开发一个命令行工具，那么这个属性就会很有用。否则请跳过以节约你的时间。
bin 属性可以让我们很简单制作命令行工具，具体如何制作可以跳转：使用 bin 属性制作命令行工具
4.
scripts属性scripts 中文名称为脚本，也就是说可以为我们带来便利。
以上面的配置为例：
scripts 的脚本运行方式是在命令行中输入 npm run <脚本名称>
上图中只有一个 start 值，那么运行时要输入 npm run start
如果不输入脚本，就需要在命令行中输入 node index.js 这行代码
真实情况是输入 node index.js 但是觉得这么太麻烦，就用 npm run start 去代替 node index.js。
5.
engines属性一直很纳闷一件事，就是怎么通过 package.json 文件就能知道当前项目依赖 node 的哪个版本，依赖 npm 的哪个版本。。。
后来偶然发现，package.json 中已经提供了这个一个属性，用来记录当前项目依赖 node 和 npm 的版本号。写法如下：
"engines": { "node": ">=6.9.0", "npm": ">=3.10.10" }6.
publishConfig属性当我们开发完自己的项目想要将它发布到 Npm 仓库就需要使用这个属性。默认情况下我们是往 Npm 公共仓库中发布包，默认地址是：
https://www.npmjs.com/，此时在package.json文件中可以不加这个属性。但是如果公司内部搭建了 Npm 私有仓库，此时发布包就不是往
https://www.npmjs.com/这个地址上发布了，而是公司内部提供的地址，如：http://gongsineibu/nexus/repository/npm-hosted/。此时配置如下："publishConfig": { "registry": "http://gongsineibu/nexus/repository/npm-hosted/" }补充：
- publicConfig 属性决定了我们发布包发布到哪里去。
- 那么什么决定我们下载包从哪里下载呢？
.npmrc文件记录从哪里下载包
使用webpack运行一个项目
当知道了上述的相关知识之后我们要开始运行一个文件。
我们在这个目录下 创建一个index.js文件 里面写上
console.log('hello world',process.argv);//先不要管process.argv是做什么的。我们已经可以启动了
然后了 打开命令行 输入（根目录下，也就是我们之前输入指令的地方）
node index.js你会发现他打印了 如下的内容
再然后，我们使用另一种方式去启动，如果node 之后的路径很长怎么办，总不能一直输入很长的路径吧
我们修改webpack.js中一个行数据，把
"text":" ...... ",//这一行换成"dev": "node index.js"
我们再次打开命令窗口，输入 npm run dev 然后回车，你会发现与node index.js输出的一模一样。
