从零开始搭建vue-node-webpack前端项目环境step1

1、先用npm init 初始化项目，生成package.json文件

2、由于我们前端项目是采用wepack作用编译压缩文件，在这里就从webpack的相关配置开始进行，

在项目文件下创建build文件夹，用来存放我们webpack的相关配置。然后再build文件夹下新建webpack.config.base.js，webpack.config.dev.js,webpack.config.prod.js三个文件。由于我们项目环境存在着开发环境和正式环境之分，所以webpack.config.dev.js就代表着开发环境，webpack.config.prod代表着正式环境。而webpack.config.base.js就是正式环境和开发环境一些共同的配置。

此时，项目初步结构如图

3、我们根据webpack官网，根据官网介绍一步一步来搭建。首先可知wepack编译需要制定一个入口文件，故而我们在webpack.config.base.js编写如下

在这里我们按照webpack官网的指示，webpack配置文件指明了入口文件和输出文件，入口文件为app.js在这里我们已经在项目文件下创建了它

4、至此，webpack的简单初始配置已经完成了，在这里我们可以显尝试着运行一下。首先，我们先安装webpack的模块包，执行命令cnpm i webpack -D.webpack安装后可能出现要你安装webpack-cli/webpack-command，跟着安装就行。

5、在packjson里面设置执行命令如下：当我们在控制台，执行npm run dev之时，就会帮我们执行我们dev配置的命令语句。最终执行结果如下图所示，并且成功的生成了dist文件，里面含有我们编译过后的脚本文件bundle.js

至此，webpack第一步入门算是成功了。