1、至此，webpack初步打包工作算是已经完成了。现在我们可以测试一下打包过后的bundle.js能不能正确的运行。

在项目根目录下，新建index.html，然后再app.js里面随便输写一些语句,最后执行npm run dev，执行index.html，我们可以发现最终成功的弹出了alert语句

2、现在我们有了页面，脚本也可以运行了。想必大家都会迫不及待的开始撸起项目来了。的确，现在我们就可以往index.html里面写入一些css开始我们的布局，但是因为我们前端要采用vue的框架，所以至此我们要开始vue框架的搭建了。

3、首先，先安装vue,顺便vue-router也是是不可少的。cnpm i vue vue-router -s

4、将vue安装好之后，我们就可以在app.js里面注册vue的示例，将index.html作为入口文件。在这里大家可以去看一看vue-cli官方脚手架生成的项目结构。在这里我们大体借用了其架构。首先我们新建了src文件夹，用来存放今后我们的前端相关文件，然后再src目录下新建了app.vue入口文件。

然后我们在app.js里面将app.vue引入，然后进行vue实例的挂载。

5、重新运行npm run dev命令，但是我们发现最终打包报错了。

这是因为webpack一开始只支持js脚本文件，其余什么类型的文件但都不支持，必须要针对每一种类型文件做相对应的配置，也就是我们的loader.故此在我们的webpack.config.base.js里面配置如下（不管开发环境还是正式环境都是需要解析vue,所以要写在base里面）

配置loader当然要安装相对应的vue-loader.。在安装vue-loader的过程中，还会要求我们安装css-loader和vue-template-compiler两个loader,按照提示依次安装就行。其次，不少人在安装完上述loader之后，在执行npm run dev发现还是会报错，报错如下

上述报错是因为最新版本的vue-loader，要引入vue-loader-plugin的相关配置，故此最终base.js配置如下

最终，在执行npm run dev发现我们已是能够成功编译