webpack详解（1）
一、什么是webpack
|--官网：https://webpack.js.org/
|--官网截图：
bundle your assets捆绑你的资产
bundle your scripts捆绑你的脚本（js）
bundle your images捆绑你的图片
bundle your styples 捆绑你的样式
|--官网解释的可以总结为：
|--打包你的资源，包括js、css、image。
|--那么到底webpack是干什么的？
|--其实就是一个模块打包器。
二、为什么用webpack
|--不使用webpack的场景：以前开发时，一个html可能引用十几个js文件，而且顺序还不能乱，因为他们之间可能存在某种依赖关系，与此同时随着ES6的广泛应用，一些新的语法，less，sass等，css预处理器不能的很好的解决，此时就出现了webpack这个工具，解决上述的问题。
|--如何解决上述问题：webpack把你的项目当成一个整体，通过一个入口主文件，例如：index.js。从这个文件开始找到你的项目所有依赖文件并处理他们。最后打包成一个（或多个）浏览器可以识别的javascript文件。
三、webpack的准备工作
|--1.创建一个webpack-project文件夹，并进入文件夹下，使用npm init初始化一个package.json。
|--注意：如果想跳过如图第二部分（不想发布这个模块）的一大堆询问，直接npm init -y。
创建package.json文件
package.json文件内容
|--2.安装webpack和webpack-cli，webpack模块把一部分功能分到了webpack-cli，所以都要安装。
|--npm install webpack -global：全局安装webpack命令
|--简写：npm i webpack -g
|--npm install webpack-cli --sava-dev：安装本地项目模块，--sava-dev用于把配置添加到package.json的
开发环境配置列表中。
|--简写：npm i webpack-cli -D
|--npm install webpack --save：不添加到package.json配置列表中。
|--简写：npm i webpack -S
|--注意：如果npm下载比较慢，可以使用淘宝的cnpm的镜像，安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
|--使用cnpm命令代替npm
安装cnpm
|--安装webpack：
查询版本，进行重新安装
更新到最新版本
|--安装webpack-cli，先使用--sava/-S方式：
安装webpack-cli
package.json文件
项目目录
使用-D方式重新安装webpack-cli
package.json
（为什么多出来一个devDependencies？后面就会知道，先不用考虑！）
|--3.在项目目录新建两个文件夹src和dist，和三个文件
|--dist文件夹：
|--index.html
|--src文件夹：
|--hello.js
|--index.js
|--如图：
创建src和dist
|--准备工作完毕，现在让我们开始学习使用webpack，是如何进行打包的！
四、webpack打包（简单）
|--第一步：我们在dist/index.html文件下，引入我们一会打包之后的js文件。
index.html
|--第二步：我们在hello.js中导出一个模块。
导出一个function
|--第三步：在index.js把hello这个模块引入。
引入hello模块
|--上述操作的意义：首先我们把hello模块合并到index模块，index.js作为一个入口文件，我们通过webpack
打包这个index.js，最后生成一个bundle.js文件，在index.html页面引入打包后的文件。会出现什么效果？
如果我们把多个模块，在index.js中引入，然后对其打包，最后在页面只引入打包后的bundle.js，是不是很
给力呢？往下看
|--第四步：通过webpack开始进行打包。
同时编译了index.js和hello.js文件
打包成功，打包后文件内容
访问index.html ，hello模块内容已经被渲染到页面
