各位同学大家好 ，那么本节视频 ，我们会给大家去讲解一下 ，如何安装webpack ，以及我们会给大家 ，进行一些 ，Web pack配置 ，首先第一步 ，我们回到我们的桌面 ，我们来到桌面之后 ，我已经启动了一个终端 ，我通过这个终端 ，先来安装一下 ，全局的Web pack ，以及Web pack-cli以及另外一个东西 ，叫做Web pack-d-server ，这三个东西我们都需要装 ，所以如果大家是在windows系统下的话 ，直接使用npm install ，然后Web pack ，还有一个叫做Web pack-cli最后一个叫做Web pack-dev ，杠我们的server ，然后给他一个-g这个时候你点击回车就开始安装了 ，我在这一块需要做的事情 ，需要使用超级管理员的形式去安装 ，我在MAC系统下 ，我需要加上一个速度 ，这个时候我们点击回车 ，回来之后 ，我们需要输入一个密文的密码 ，我们点击我们当前电脑登录的密码 ，然后我们就开始安装 ，我们假定大家现在已经将我们全局的Web pack ，以及cli以及dev server ，都已经装好了 ，接下来 ，我们需要在我们当前的桌面上 ，来建一个我们Web pack项目 ，所以我们通过终端CD ，到我们的desktop下边来 ，然后我们使用mkdir ，创建一个文件夹叫做Web pack course ，新的文件夹有了之后 ，我们接下来再需要做的事情就是 ，在这个文件夹下面 ，再创建三个文件夹 ，所以我们今天cli到 ，web pack course里边来 ，然后我们创建三个 ，一个叫做src一个叫做我们的dist ，还有一个叫做config ，这三个文件夹 ，我们来看一下 ，有没有创建成功 ，大家会发现 ，我们当前这个文件夹下 ，拥有三个文件夹 ，就已经没有任何的问题了 ，接下来我们来创建一个点data文件 ，它是一个隐藏文件 ，主要是帮助我们 ，来初始化一个本地的仓库 ，

然后方便我们后期 ，将我们的代码 ，上传到desktop上 ，所以我们现在已经初始化了 ，一个空的本地仓库 ，再接下来 ，我们需要做的事情就是 ，来创建一个package点Jason这个文件 ，所以我们npm init-y这个时候你的package点Jason就已经存在了 ，然后我们这一块 ，这几个东西都设置好之后 ，我们接下来再做的事情 ，给我们的dist ，和我们的src当中 ，分别创建两个文件 ，因为我想要给大家展示一下 ，web pack4 ，它给我们新出来的命令 ，能够有什么样的帮助 ，以及跟我们之前的版本有什么不同 ，所以我们必须要现在 ，能够在这个文件当中 ，创建文件夹下 ，创建两个 ，我们需要的文件 ，我们就可以直接 Touch ，我们在dist这个文件夹下 ，我们要新创建一个 ，叫做index点html的 ，这是我们要展示我们的内容 ，同样在src下面 ，我们要创建一个叫做index.这个文件是当 ，你使用命令的时候 ，它会自动找到入口文件 ，然后我们点击回车 ，这个时候我们来测试一下 ，我们的这个Src下 ，是不是有一个index.js然后我们同样也测试一下 ，我们的dist这个下面 ，是否拥有一个叫做index HTML ，都有之后ok ，那么我们当前 ，所需要构建的基本框架 ，就已经有了 ，然后我们通过这个code点 ，然后打开我们的vs code ，我们打开 Vs code之后 ，我们现在再需要做的事情 ，我们可以直接去把我们将当前的项目 ，进行一个打包 ，如果大家记得 ，我们以前的版本的话 ，我们就一定会用到一个东西叫做web pack ，点dev点js这么一个文件 ，因为以前的时候 ，你运行webpack ，进行打包的时候 ，它会自动找到这个文件 ，才可以将你这个里边的东西 ，进行一个打包 ，但是在webpack4里边 ，这个文件其实你不需要 ，

你也仍然可以去实现打包 ，只要你src当中 ，拥有一个叫做index点js然后你这个dist里边 ，拥有一个叫做index HTML ，有了两个文件之后 ，它就会找到这个东西 ，作为一个默认的入口 ，然后将你当前的内容 ，进行一个打包 ，怎么来实现 ，我们来试一下 ，我们可以直接web pack ，杠杠 ，Mode是我们web pack当中独有的 ，所以等于谁 ，等于有两种打包的环境 ，一个叫做我们开发环境叫做development ，我们可以试一下 ，点击回车 ，这个时候你会发现成功了 ，然后他会帮我们生成一个叫做main点js的 ，在我们的dist这个文件夹下 ，大家会发现 ，我们这个里面 ，就拥有了一个文件 ，叫做main点js里边 ，全都是我们web pack ，对应的一些代码 ，Ok这是我们开发环境下 ，要使用的这么一个命令 ，然后还有一个是我们生产环境 ，也就是你要上线的时候 ，你需要用到的就杠杠mode ，等于什么 ，等于叫做production ，这个东西 ，你一点击回车 ，你会发现 ，同样也打包成功了 ，而且在这个地方 ，给我们生成一个 ，叫做nod models ，大家需要关注的一个地方是什么 ，我们开发环境下的话 ，它打包的这个main点js是2.81kb ，但是如果你在这个生产环境下的话 ，你打包下来的东西 ，只有545bytes ，也就是说 ，这个是非常小的一个体系 ，这个里边只会打包 ，你用到的东西 ，你不用的东西 ，它不会给你打包进去的 ，然后你就可以将你打包的内容 ，进行一个上线了 ，Ok这个是我们要给大家介绍的一个我们web pack4 ，和我们之前版本 ，不同的一个地方 ，那么我们是不是以后就不需要web pack ，点dev点js这个文件了 ，不是的 ，如果你需要加载一些 ，

对应的这种 ，比如说css然后图片 ，这些东西的话 ，你还是需要使用我们的web pack点 ，dev点js因为你需要用到lotus ，或者是你加的一些插件 ，所以我们现在就要再来创建一个 ，叫做web pack点 ，dev点js我们把这块clear一下 ，然后我们直接touch ，到谁到我们的config下边 ，拥有一个叫做web pack.dev点js这个文件名字一定是它 ，所以我们点击回车 ，这个时候大家会在你的config点js里边 ，拥有这么一个文件 ，拥有这么一个文件 ，然后我们现在生成一个main ，点js包括我们src当中 ，有一个index点js其实这两个东西 ，我就不想要了 ，因为我们想要重新去构建 ，