webpack的安装及使用

1.首先得安装好nodeJs以及npm（现在一般官网下载nodeJs的.msi安装包会默认给你安装上npm），安装完之后进行（图一）的操作，如果能获取到版本号就进行第二步操作。

图一

2.完成第一步操作之后我们可以进行webpack的安装了，使用（npm install -g webpack webpack-cli）进行webpack，webpack-cli的全局安装，安装完成之后进行 （图二）的操作，如果能获取到版本号就进行第三步操作。

图二

3.完成第二步操作之后我们的webpack就已经安装好了，接下来就是教你怎么使用了，自己新建一个项目空目录，然后在这个目录里面新建一个package.json的文件 ，再然后在这个项目目录下面执行命令（npm init[会询问你一些问题，可以直接回车跳过]）这时候你的package.json文件里面会生成一些配置信息，之后在这个项目目录下面执行命令（ npm  install  webpack  webpack-cli  --save-dev ）进行包仓库下载（ 类似后端的maven仓库 ），上述完成之后在创建的目录下面再创建一个src目录和index.html文件以及dist目录，然后在src目录下面创建index.js文件以及init.js文件，每个文件内容如下图：图下内容完成之后就可以进行第四步了。

图三 图四 图五

4.上述步骤完成之后我们可以进行打包操作了，我们还是在项目目录下输入命令（webpack），然后在package.json里面配置如下图六内容：（其中的build也可改为：图七的内容），前面的完成之后我们可以进行打包了，使用图六或者图七里面备注的命令进行打包，用的哪一种方式就用对应的打包方式，其中的区别请看图八。

图六（可以使用npm  run  dev）打包 图七（可以使用npm  run  build）打包 图八

5.完成上述操作，我们的webpack就已经打包好了，图九是一些总结：

图九

6.最后一步的一些操作就是配置webpack.config.js这个配置文件了，也是webpack最重要的一部分，一般网上都有一些写好的配置，直接下载下来就可以了，运行方法请自行百度，886，886，see you tomorrow