问题描述
我正在创建一个新项目。当我完成安装 npm 包并运行基本设置时,一切正常,除了当我更改代码并保存文件并移至浏览器查看更改时,页面未在浏览器中重新加载。我必须手动刷新页面才能看到新的更改。
这是我的 package.json 文件:
{
"name": "resume","version": "1.0.0","description": "","main": "index.js","scripts": {
"start": "webpack serve"
},"keywords": [],"author": "","license": "ISC","dependencies": {
"@babel/preset-react": "^7.12.10","react": "^17.0.1","react-dom": "^17.0.1"
},"devDependencies": {
"@babel/core": "^7.12.10","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/preset-env": "^7.12.11","babel-loader": "^8.2.2","clean-webpack-plugin": "^3.0.0","html-webpack-plugin": "^4.5.1","webpack": "^5.12.2","webpack-cli": "^4.3.1","webpack-dev-server": "^3.11.1"
}
}
这是我的 webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')
module.exports = {
mode: 'development',devServer: {
historyApiFallback: true,contentBase: path.resolve(__dirname,'./dist'),open: true,compress: true,hot: true,port: 8080,},target: 'web',// entry: {
// main: path.resolve(__dirname,'./src/index.js'),// },// output: {
// path: path.resolve(__dirname,// filename: '[name].bundle.js',module: {
rules: [
// JavaScript
{
test: /\.js$/,exclude: /node_modules/,use: ['babel-loader'],],plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',template: path.resolve('./index.html'),filename: 'index.html',// output file
}),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin(),}
我在网上搜索,问题似乎出在 webpack-dev-server 上,但我不确定。请帮忙。
解决方法
将 webpack-dev-server 版本更新为 4.0.0-beta.0 我也遇到了同样的问题。