When npm start, open http://localhost:8080/ and modify the js file. Why is it not refreshed in real time?
The port is still the same, there is no real-time refresh, and there is no change after manual refresh
Directory Structure
webpack.config.js
const path = require('path');
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
publicPath: './dist'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
devServer: {
contentBase: "./",
historyApiFallback: true,
hot:true,
inline: true // 实时刷新
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.0",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4"
}
}
solved
//修改
//publicPath: './dist' => publicPath: '/dist'
publicPath path problem, remove the dot
/dist
,或使用绝对路径publicPath: 'http://127.0.0.1:8080/examples/build
No refresh or no real-time refresh? Have you enabled nginx reverse proxy?