Webpack 4 watchContentBase失效：修改文件后页面不自动刷新

看起来你的自动刷新问题是由几个配置和命令的小问题组合导致的，咱们一步步来排查解决：

1. 修复package.json里的启动命令 #

你的dev命令里的--watch-content-base js/index.js写法错误，--watch-content-base是一个开关型选项，不需要指定具体文件路径——它的作用是监听contentBase目录下的所有文件变化。你可以把命令改成：

"dev": "webpack-dev-server --open --mode development --watch-content-base --output dist/main.js"

或者更推荐把watchContentBase配置写到webpack.config.js里，命令里就不用额外加这个参数了。

2. 开发环境替换MiniCssExtractPlugin为style-loader #

MiniCssExtractPlugin主要用于生产环境提取独立的CSS文件，但在开发环境下它不支持热模块替换（HMR）——这就是你能看到CSS编译完成，但页面却不刷新的核心原因之一。开发环境应该用style-loader把CSS直接注入到DOM中，实现实时更新：
修改你的SCSS规则：

{
  test: /\.scss$/,
  use: [
    // 开发环境用style-loader，生产环境再换回MiniCssExtractPlugin.loader
    "style-loader", 
    {
      loader: "css-loader",
      options: {
        modules: false,
        sourceMap: true,
        importLoader: 2
      }
    },
    "sass-loader"
  ]
}

如果需要区分生产/开发环境的配置，可以把配置拆成两个文件，或者用环境变量做判断。

3. 完善devServer配置 #

你的webpack.config.js里的devServer缺少几个关键配置项：

• 加上watchContentBase: true，确保能监听contentBase（你的项目根目录）下的文件（比如index.html）变化
• 开启hot: true启用热模块替换，进一步提升开发体验
• 你的contentBase设置为项目根目录是没问题的，不用调整路径

修改后的devServer配置：

devServer: {
  contentBase: path.resolve(__dirname, ""), // 根目录路径正确
  publicPath: '/dist/',
  overlay: true,
  watchContentBase: true, // 新增：监听contentBase下的文件变化
  hot: true // 新增：启用热模块替换
}

4. 确认index.html的资源引用路径 #

确保你的index.html里引用JS和CSS的路径和publicPath一致：

<script src="/dist/main.js"></script>
<link rel="stylesheet" href="/dist/main.css">

如果路径不对，dev-server无法正确注入自动刷新的脚本，也无法加载更新后的资源。

最后验证 #

做完这些修改后，重启webpack-dev-server，试试修改SCSS、JS或者index.html，应该就能触发自动刷新了。

内容的提问来源于stack exchange，提问作者Michael Harper