webpack - vue热重载不重载

Question

将 Vuejs 与 webpack 结合使用。

我安装了 vue 热重载:

"vue-hot-reload-api": "^2.0.6"

然后我启动 webpack 开发服务器，并且能够查看页面 sing http://localhsot:8080 :

webpack-dev-server --inline --hot

问题:页面更改不会自动重新加载，我必须运行 webpack 命令才能看到更改。

---

wepack.config.js:

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './app/main.js',
  // Where should the compiled file go?
  output: {
    // To the `dist` folder
    path: './dist',
    // With the filename `build.js` so it's dist/build.js
    filename: 'build.js'
  },
  module: {
    // Special compilation rules
    loaders: [
      {
        // Ask webpack to check: If this file ends with .js, then apply some transforms
        test: /\.js$/,
        // Transform it with babel
        loader: 'babel',
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /node_modules/
      },
      {
          test: /\.vue$/,
          loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  vue: {
    loaders: {
      js: 'babel'
    }
  }
}

package.json:

{
  "name": "xx",
  "version": "0.0.1",
  "description": "xx",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "vue",
    "electron"
  ],
  "author": "xx",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "electron": "^1.3.5",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "pouchdb": "^6.0.4",
    "vue": "^1.0.26",
    "vue-resource": "^1.0.1",
    "vue-router": "^0.7.13"
  }
}

Answer 1

在 webpack.config.js 中添加 publicPath: dist/ 之前，我的开发服务器无法正常工作，
如果你和我一样遇到同样的问题，也许你可以试一试。

output: {
    path: './dist',
    filename: 'build.js',
    // ↓↓↓↓↓add this to make dev-server working
    publicPath: 'dist/', 
}