看了一些教程,最后做出来的是需要手动刷新页面更改才会生效。
我想要的是更改代码后保存就页面刷新,这个现在实现不出来。
已有代码
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --colors --hot",
"build": "webpack --display-error-details",
"watch": "webpack --progress --colors --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"vue": "^2.2.6",
"vue-loader": "^11.3.4",
"vue-router": "^2.4.0",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
现在是执行npm run start 监控不到改动。执行npm run watch,需要手动刷新浏览器。如何把webpack打包和webpack-dev-server结合到一起,实现保存就自动编译代码刷新浏览器?
我的解决方法是把 publicPath 路径换成绝对路径: