Webpack-dev-server页面不刷新及资源路径异常问题求助

算力阿峰

2026-8-18

解决方案

问题1：页面无法刷新，旧代码先执行

原因

devServer配置中监听了dist/**/*，但webpack-dev-server在开发模式下默认使用内存编译，dist目录的文件并非实时更新的编译产物，监听该目录会导致刷新逻辑混乱，同时可能读取到旧的编译文件；另外原配置中liveReload: true后缺少逗号，存在语法错误。

修复步骤

调整watchFiles监听目标为源码和HTML页面文件，移除对dist目录的监听：

devServer: {
  hot: true, 
  port: 5004, 
  liveReload: true, // 补全遗漏的逗号
  // 监听源码和HTML文件，根据你的实际目录调整
  watchFiles: ['src/**/*', 'dist/html/**/*.htm'],
  devMiddleware: {
    publicPath: '/dist/',
  },
  static: {
    directory: path.resolve(__dirname, 'dist'),
    watch: true,
  },
  // 简化open路径，static目录指向dist，直接写相对dist的路径即可
  open: '/html/layout/layout.htm',
},

问题2：字体/SVG路径缺失斜杠，无法加载

原因

配置中没有处理CSS文件的规则，FontAwesome CSS里的字体引用（url()）未被webpack解析，浏览器直接按照CSS文件的相对路径请求资源，导致路径拼接错误；而图片是通过JS/JSX引入的，被webpack正常处理，所以路径正确。

修复步骤

安装必要的loader：

npm install css-loader style-loader --save-dev

在module.rules中添加CSS处理规则：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/i,
      loader: 'babel-loader',
    },
    // 新增CSS处理规则，让webpack解析CSS中的资源引用
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
      type: 'asset/resource', 
      generator: {
        filename: 'static/[hash][ext][query]',
      },
    },
  ],
},