接着上一篇文章，配置如下:
webpack.config.json
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry:{
"index":[__dirname+'/src/js/index.js',
'webpack-dev-server/client?127.0.0.1:8080'
]
},
output:{
publicPath:"http://127.0.0.1:8080/",
path:__dirname+'/src/webapp/js',
filename:'[name].js'
},
resolve:{
alias:{
vue:'vue/dist/vue.js'
}
},
externals:{
},
module:{
loaders:[
{
test:/\.js$/,
loader:"babel-loader",
query:{compact:true}
},
{
test:/\.vue$/,
loader:"babel-loader!vue-loader",
exclude:"/node_modules/"
}
]
},
plugins:[
new HtmlWebpackPlugin({
/*filename:__dirname+'/src/webapp/index.html',*/
filename:"index.html",
template:__dirname+'/src/html/index.html',
inject:'body',
hash:true,
chunks:['index']
})
]
}
package.json
{
"name": "vuepro",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"pro": "webpack -p",
"dev":"webpack-dev-server --inline --hot --content-base ./src/webapp"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"vue": "^2.5.13",
"vue-loader": "^13.7.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}
運行方式：
npm run dev訪問：
http://127.0.0.1:8080/
就能看到實時刷新更改了，而不用每次改變都要編譯一次。