使用Pug Plugin时Webpack DevServer无法自动重载的问题求助

Hey，看起来你遇到了Webpack DevServer修改文件后不自动重载的问题，控制台还提示没检测到变化对吧？我帮你分析下配置里的几个关键点，调整后应该就能解决了：

• 显式设置DevServer的监听文件目录
  默认情况下，Webpack DevServer可能不会自动监听所有源文件的变化，尤其是当你的入口是Pug文件时。你可以在devServer配置里添加watchFiles，指定监听src目录下的所有文件：

devServer: {
  static: {
    directory: path.join(__dirname, 'dist/')
  },
  hot: true,
  open: true,
  watchFiles: ['src/**/*'] // 新增这一行，监听src下所有子文件和文件夹
},

这样DevServer会主动扫描src目录的任何变化，不管是Pug、SCSS还是其他文件，一旦修改就触发重载。

• 修正CSS/SCSS Loader的执行顺序
  你的样式规则里loader顺序写反了！Webpack的loader是从右到左执行的，必须先让sass-loader把SCSS编译成CSS，再用css-loader处理。如果是开发模式下，你还需要style-loader把CSS注入到页面里（如果PugPlugin没帮你处理的话），调整后的规则应该是：

{
  test: /\.(s*)css$/,
  use: ['style-loader', 'css-loader', 'sass-loader'], // 调整顺序并添加style-loader
},

如果PugPlugin已经负责处理样式输出到单独的CSS文件，那你可以保留原来的loader顺序，但一定要确保从右到左的执行逻辑，不然样式可能无法正确编译，也会影响变化检测。

• 添加轮询模式应对文件系统检测问题
  有些操作系统或者IDE的文件保存机制会导致Webpack无法自动检测到文件变化，这时候可以给devServer加上watchOptions启用轮询：

devServer: {
  // 其他配置...
  watchOptions: {
    ignored: /node_modules/, // 忽略node_modules，提升性能
    poll: 1000 // 每隔1秒轮询一次文件变化
  }
}

这个方法对Windows系统或者某些远程开发环境特别有用。

• 确认PugPlugin的依赖解析
  检查你的Pug文件里是否正确引入了SCSS等资源，确保PugPlugin能把这些依赖加入Webpack的依赖图里。如果Pug里的样式是通过link或者@import引入的，PugPlugin应该会自动处理，但如果是其他方式引入的，可能需要手动把这些资源加入entry，或者调整PugPlugin的配置。

修改完配置后重启DevServer，再修改Pug或SCSS文件试试，应该就能触发自动重载了。

备注：内容来源于stack exchange，提问作者Juliena