摘要：包中導(dǎo)出的默認(rèn)是運(yùn)行時(shí)構(gòu)建。當(dāng)然，我們期待的是只修改代碼，不用重新運(yùn)行命令，甚至不需要刷新瀏覽器即看到代碼的改動(dòng)效果，這時(shí)候需要新的插件來配置實(shí)現(xiàn)的熱重載。

首先已經(jīng)全局安裝了node/vue/webpack;

cd demo4
npm init -y

這是頁(yè)面會(huì)生成一個(gè)package.json文件。

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-dev
npm install html-webpack-plugin --save-dev
npm install vue --save

webpack-dev-server: webpack-dev-server是一款小型的Node.js Express服務(wù)器，我們使用它主要是為了實(shí)現(xiàn)代碼的熱重載，具體使用方法可參見webpack-dev-server使用方法，看完還不會(huì)的來找我~
vue-loader/vue-html-loader/css-loader/vue-style-loader...: webpack中l(wèi)oader的作用不多講，用法看文檔
vue-hot-reload-api: vue-hot-reload-api顧名思義，亦為實(shí)現(xiàn)vue熱重載
此時(shí)package.json中的devDependencies和dependencies應(yīng)該是這樣的：

"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
        })
    ]
}

命令行運(yùn)行webpack命令， 此時(shí)在dist文件目錄下分別生成了js/index.js和index.html，在頁(yè)面中打開index.html發(fā)現(xiàn)頁(yè)面有報(bào)錯(cuò)： [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. 這是因?yàn)榇藭r(shí)使用的是vue.runtime.common.js，這里可以閱讀以下官方文檔中的獨(dú)立構(gòu)建VS運(yùn)行時(shí)構(gòu)建；簡(jiǎn)單理解就是獨(dú)立構(gòu)建可以自己將字符串模板（template）編譯為渲染函數(shù)（render），然后再運(yùn)行時(shí)再調(diào)用編譯好的渲染函數(shù)，而運(yùn)行時(shí)構(gòu)建是在Vue2開始后，為了實(shí)現(xiàn)在服務(wù)端渲染，不依賴與瀏覽器端的DOM接口，而不允許使用template模板，因此運(yùn)行時(shí)構(gòu)建比獨(dú)立構(gòu)建要小，但是不能使用template模板，而官方文檔中也有說明。npm包中導(dǎo)出的默認(rèn)是運(yùn)行時(shí)構(gòu)建。如果希望使用獨(dú)立構(gòu)建，可以添加以下代碼

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

這句話是添加到webpack.config.js中的，當(dāng)然，我們也可以打開node_modules/vue/package.json文件，將其中的main指向"dist/vue.runtime.common.js"改為"vue/dist/vue.common.js"。

此時(shí)再重新運(yùn)行webpack命令，可能還會(huì)報(bào)錯(cuò)： Cannot find module "vue-template-compiler" ，此時(shí)在命令行中運(yùn)行npm install vue-template-compiler即可。
在運(yùn)行webpack命令，在瀏覽器中打開dist/index.html文件就可以看到代碼完美運(yùn)行了。我們只需要在src/下修改我們的Hello.vue或者是index.js以及index.html文件，然后運(yùn)行webpack然后刷新頁(yè)面即可看到代碼的改動(dòng)效果。
當(dāng)然，我們期待的是只修改代碼，不用重新運(yùn)行webpack命令，甚至不需要刷新瀏覽器即看到代碼的改動(dòng)效果，這時(shí)候需要新的插件來配置實(shí)現(xiàn)vue的熱重載。