webpack的环境配置

     许多小伙伴在学到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文件夹，成功显示“我是代码”，环境成功搭建。