首先已经全局安装了node/vue/webpack;

新建文件夹demo4并初始化

cd demo4npm init -y

这是页面会生成一个package.json文件。

安装webpack及相关插件

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-devnpm install html-webpack-plugin --save-devnpm install vue --save

webpack-dev-server: 是一款小型的Node.js Express服务器，我们使用它主要是为了实现代码的热重载，具体使用方法可参见

vue-loader/vue-html-loader/css-loader/vue-style-loader...: webpack中loader的作用不多讲，用法看文档vue-hot-reload-api: 顾名思义，亦为实现vue热重载此时package.json中的devDependencies和dependencies应该是这样的：

"devDependencies": {    "babel-core": "^6.23.1",    "babel-loader": "^6.4.0",    "babel-plugin-transform-runtime": "^6.23.0",    "babel-preset-es2015": "^6.22.0",    "babel-runtime": "^5.8.38",    "css-loader": "^0.26.4",    "vue-hot-reload-api": "^2.0.11",    "vue-html-loader": "^1.2.4",    "vue-loader": "^11.1.4",    "vue-style-loader": "^2.0.3",    "webpack": "^2.2.1",    "webpack-dev-server": "^2.4.1"  },  "dependencies": {    "vue": "^2.2.2"  }

建立文件目录

demo4    |__dist    |   |__js    |__src    |   |__index.html    |   |__js    |   |    |__index.js    |   |__components    |      |__hello.vue    |__node_modules    |__package.json    |__webpack.config.js

dist: 存放生成的文件

src: 存放编辑的文件模板等components: 存放components组件

• src/index.html

• src/js/index.js

import Vue from 'vue';import Hello from "../components/Hello.vue";new Vue({    el: "#test",    template: '
    ',    components: { Hello }})

• src/components/Hello.vue

• webpack.config.js

var path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: path.resolve(__dirname, './src/js/index.js'),    output: {        path: path.resolve(__dirname, './dist'),        filename: './js/[name].js'    },    module: {        loaders: [            {                test: /\.vue$/,                loader: 'vue-loader'            },            {                test: /\.js$/,                loader: 'babel-loader',                query:{                  presets: 'es2015'                  },                exclude: /node_modules/            }        ]    },    plugins: [        new htmlWebpackPlugin({            template: './src/index.html',            hash: true        })    ]}

命令行运行webpack命令， 此时在dist文件目录下分别生成了js/index.js和index.html，在页面中打开index.html发现页面有报错： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 这是因为此时使用的是vue.runtime.common.js，这里可以阅读以下官方文档中的；简单理解就是独立构建可以自己将字符串模板（template）编译为渲染函数（render），然后再运行时再调用编译好的渲染函数，而运行时构建是在Vue2开始后，为了实现在服务端渲染，不依赖与浏览器端的DOM接口，而不允许使用template模板，因此运行时构建比独立构建要小，但是不能使用template模板，而官方文档中也有说明。npm包中导出的默认是运行时构建。如果希望使用独立构建，可以添加以下代码

webpack中resolve: {  alias: {    'vue$': 'vue/dist/vue.common.js'  }}

这句话是添加到webpack.config.js中的，当然，我们也可以打开node_modules/vue/package.json文件，将其中的main指向"dist/vue.runtime.common.js"改为'vue/dist/vue.common.js'。

此时再重新运行webpack命令，可能还会报错： Cannot find module 'vue-template-compiler' ，此时在命令行中运行npm install vue-template-compiler即可。

在运行webpack命令，在浏览器中打开dist/index.html文件就可以看到代码完美运行了。我们只需要在src/下修改我们的Hello.vue或者是index.js以及index.html文件，然后运行webpack然后刷新页面即可看到代码的改动效果。当然，我们期待的是只修改代码，不用重新运行webpack命令，甚至不需要刷新浏览器即看到代码的改动效果，这时候需要新的插件来配置实现vue的热重载。