我正在尝试使用webpack-dev-server运行一个简单的网页。我可以在http://localhost:8080/中看到我的页面，但是无论我执行什么设置都不能正确运行热重载，当我单击ctrl s时，console.log将立即显示类似以下内容：
[WDS] Live Reloading enabled.
我的cmd显示：
｢wdm｣: Compiled successfully.｢wdm｣: Compiling...
但是在这些之后，我的页面仍然没有改变。我需要运行npm run build来查看我的代码如何工作。
我的项目结构是这样的：
folder
-index.html
-package.json
-webpack.config.js
-src
---router
-----router.js
---views
-----header.vue
-----footer.vue
-----cat1.vue
这是我的代码。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js v2</title>
</head>
<body>
<div id="app">
<isheader></isheader>
<router-view></router-view>
<isfooter></isfooter>
</div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
</body>
</html>
package.json
{
"name": "webpack0409",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack-dev-server --devtool eval --progress --colors --hot",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.5.1",
"file-loader": "^6.0.0",
"style-loader": "^1.1.3",
"url-loader": "^4.1.0",
"vue": "^2.6.11",
"vue-loader": "^15.9.1",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1"
},
"devDependencies": {
"html-webpack-plugin": "^4.0.4",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
var path = require('path')
var config = {
mode: "development",
entry: [
'webpack/hot/dev-server',
path.join(__dirname, 'src/router', 'router')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
hot: true,
historyApiFallback: true
},
module: {
rules: [
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.css$/, loader: ["style-loader", "css-loader"] },
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'file-loader',
options: { name: 'image/[name].[ext]' }
},
],
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue: 'vue/dist/vue.js',
node_modules: __dirname + '/node_modules'
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new htmlWebpackPlugin({
template: './index.html'
}),
]
}
module.exports = config
标题
<template>
<div>
<div style="background: #44bb55;">
<router-link to="/">Home</router-link>
<p>header</p>
</div>
</div>
</template>
header，footer，cat1，这3个文件的代码相似，只是CSS样式不同。路由器链接可以正常工作，只是热重装不起作用。
我有什么问题吗？预先感谢。
感谢阅读。我发现有人有类似的问题：Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser
并且我在webpack.config.js中删除了publicPath
现在看起来像这样：
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
现在我的页面可以正常刷新。