许多小伙伴在学到vue时，当做单页面应同时，不可避免的会用到webpack，可是那都是命令自动帮我们做好的，如果想在自己的项目中运用的话，又该怎么做呢？
我在看了一些视频和文档后，决定自己写一篇博客来记录一下我的学习过程，方便广大博友一起学习进步。
步骤：
1打开我们的命令行工具，先进入E盘，然后mkdir命令新建一个文件夹demo，在建立一个webpack_demo。然后进入webpack_demo文件夹（这是我的项目文件夹，具体根据自己的实际情况建立文件夹）。
2.先输入npm init -y初始化一下项目，然后输入cnpm i --save webpack，等待安装完成。
3安装过程中，按照下图的格式建立这些文件夹和文件。
4在index.html文件里输入这样的内容，引入的js是我们打包后的js，先引入进来。
5.index.js里输入这样的内容。
7.我在看视频学习时，按照视频输入 webpack src/index.js dist/bunde.js，命令行报错如下ERROR in multi “webpack src/index.js dist/bunde.js”大概意思就是这个命令是错误的，后来一查才知道视频里的webpack版本是3.6，我的已经是4.20了，命令行代码已经改变，重新输入了 webpack src/index.js -o dist/bunde.js。
8之后dist文件夹多了一个bunde.js文件，这就是打包好的js文件。
9然后执行cnpm i live-server -g,目的是为了更快的打开我们的项目。
10安装成功后，在输入live-server，浏览器就会自动打开（如下），打开dist文件夹，成功显示“我是代码”，环境成功搭建。
