使用webpack搭建一个vue demo

前言：我们在开发vue过程中使用vue-cli脚手架工具能够十分快速的构建项目，
但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码

一.目录结构

目录结构如下：

初始化为npm项目后，创建图示文件，文件夹

mkdir webpack-vue
npm init -y

二.项目依赖

首先安装webpack开发依赖

npm i webpack webpack-cli webpack-dev-server -D

安装babel相关依赖，编译es6代码

npm i babel-core babel-loader babel-preset-2015 babel-preset-stage-0 -D

考虑到要需要需要解析图片

npm i file-loader url-loader -D

编译样式文件

npm i css-loader style-loader -D

如果要在项目中使用sass，可以安装相关依赖

npm i sass-loader node-sass -D

接下来最重要就是要编译vue文件，解析vue的模版

npm i vue-loader vue-template-compiler -D

为了将模版页面和编译后的js整合，安装插件

npm i html-webpack-plugin -D

当然还有项目中需要使用的vue的npm包

npm i vue -S

现在所有的依赖安装完毕，接下来主要对webpack.config.js进行配置

三.项目配置

webpack.config.js 配置如下，都是webpack的基本配置

const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const VueLoaderPlugin = require(<