前期准备
由于本文内容是通过npm来加载vue，所以开始之前需安装nodejs环境，安装完成之后再执行以下步骤：
创建项目
使用 npm init 命令 生成package.json文件
大概生成的package.json 如下:
引入webpack ，关于如何使用webpack 请参考官网
如果使用npm下载的速度过慢，可以使用淘宝的cnpm 镜像
输入以上命令即可将npm指向国内镜像，使用时需将npm 替换成cnpm即可， 其他不变
在项目中创建webpack.config.js 文件
使用webpack 命令编译
编译之后的项目目录大概如下:
注意：在使用webpack命令之前 需先创建 index.html 和 main.js 文件 其中 main.js文件位于src 目录下
index.html 的内容如下
最后运行webpack 命令并访问 index.html ，结果如下
在测试中发现当图片大于10KB的时候发现加载图片失败，找不到图片，但此时在dist目录下面是能看到已经通过加载器加载成功了的图片，再通过浏览器的开发者工具对图片的引用路径进行检查时，可以发现页面中img的路径不对，路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改
重新编译后图片就显示出来了。但是现在新的问题又出来了，由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。 解决此问题有两种办法：
将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：
main.js中改回原来的设置
重新编译后图片在两种情况下都可以加载出来了。
还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。
HtmlWebpackPlugin 插件
引入插件
webpack.config.js 中增加如下配置
new HtmlWebpackPlugin()
]
重新编译后发现在dist目录下生成了如下内容的html的文件
该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件
webpack.config.js 中
为了在vue中引入对.vue的使用，我们需进行如下修改
index.html
main.js
el: '#app',template: '
})
app.vue
修改完成后 运行 npm run dev 命令 ，获得如下效果的页面
热部署
在上一步中，如果我们修改app.vue文件中的msg的参数，可以看到页面会自动刷新。但是此时是页面全局刷新的，如果我们只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:
然后去package.json中，script 里面dev的值中加上 --hot -only
然后重启服务，再修改 msg 的值，会发现此时值的改变是局部刷新的。
生产环境
如果我们在浏览器的控制台中发现有如下提示
意思时说项目现在运行在开发环境中，在部署到正式环境下时，要确保它是处于production的模式。需要将代码打包部署到生产环境时需要进行如下配置：
