1.webpack是什么？

      前端资源打包工具，根据模块间的依赖关系进行静态的分析，并依据规则生成对应的静态文件；    

       它的主要作用就是让我们把复杂的程序结构细化为几个文件夹；并且将浏览器不能识别的语言【typescripe、scss、less等】打包转化为浏览器可以识别的内容。

2.webpack初试（默认你已经安装了node）

       a.全局安装webpack(本次建议安装4以下的版本，后面会说原因)

       npm install webpack@3.6.0 -g

       安装完成后，输入webpack -v，查看是否安装成功

图1：webpack安装成功

       b.新建一个文件夹，我们在文件夹下面新建一个index.html和main.js文件，目录及内容如下：

图2：目录

图3：index.html

图4：main.js

       可能有人会问，我在index中引入的是bundle.js，但是文件夹中却并没有这个文件，那是因为我的bundle文件将会是main.js打包之后生成的文件。

       c.打开控制台，进入到本文件夹目录下，输入webpack main.js bundle.js来进行打包，此命令的意思是将main.js打包到bundle.js中，运行命令后，你会看到文件夹中生成了一个bundle.js文件，并且你运行index.html文件，会看到内容

图5：打包

图6：打包生成bundle.js

图7：运行index.html结果

       问题解答：上面一开始说明了建议先使用4以下的webpack，原因是4以上的已经不支持步骤c的打包命令了。

       至此，你已经完成了一个简单的webpack打包，是不是很激动，下一节示例多个依赖文件的打包。