webpack搭建vue 项目的步骤

前期准备

3. npm

由于本文内容是通过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" 这个前缀的。 解决此问题有两种办法：

1. 不使用base64的形式将图片内嵌到代码中
2. 将html文件放到dist目录中 既然用了url-loader加载器则不推荐使用第一种。所以我们使用第二种方式。

将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：

main.js中改回原来的设置

重新编译后图片在两种情况下都可以加载出来了。

还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件

引入插件

webpack.config.js 中增加如下配置

重新编译后发现在dist目录下生成了如下内容的html的文件

该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件

webpack.config.js 中

为了在vue中引入对.vue的使用，我们需进行如下修改

index.html