执行npm run build-dev时浏览器持续刷新且CSS不生效的问题

问题现象 #

• npm run build-prod 执行后，用liveServer可正常加载页面及所有资源
• npm run build-dev 执行时，浏览器自动弹出index.html并持续刷新，且CSS未生效

配置问题分析与修复 #

1. 正则表达式错误导致资源处理失效 #

JS文件处理规则中，test 使用了字符串形式的正则 /\.js$/，会导致babel-loader无法匹配任何JS文件，正确写法应为正则表达式字面量：

{
  test: /\.js$/, // 去掉引号，使用正则字面量
  exclude: /node_modules/,
  loader: "babel-loader",
}

2. CleanWebpackPlugin配置触发循环刷新 #

当前CleanWebpackPlugin的dry: true（仅模拟删除）和protectWebpackAssets: false（允许删除webpack生成资源）配置，在开发模式下会导致每次编译都触发资源清理，进而引发页面持续刷新。开发环境建议直接禁用该插件：

plugins: [
  new HtmlWebPackPlugin({
    template: "./src/client/views/index.html",
    filename: "./index.html",
  }),
  // 开发模式下暂时注释或移除CleanWebpackPlugin
  // new CleanWebpackPlugin({...})
]

3. 固定mode导致环境区分失效 #

配置中mode: "development"写死，会让npm run build-prod也使用开发模式。应通过npm脚本传递--mode参数来覆盖：

• 修改package.json中的脚本：

{
  "scripts": {
    "build-dev": "webpack serve --mode development",
    "build-prod": "webpack --mode production"
  }
}

• 移除webpack配置中的mode: "development"，由脚本参数决定运行模式。

4. CSS未生效的核心排查点 #

• 确认入口文件已引入SCSS：在src/client/index.js中必须导入你的SCSS文件，示例：

import './styles/main.scss'; // 路径根据实际文件位置调整

• 避免混用webpack-dev-server与liveServer：使用webpack serve启动开发服务时，文件存在于内存而非dist目录，直接访问devServer默认地址（通常为http://localhost:8080）即可，无需用liveServer打开dist文件夹。

5. 优化开发服务配置（可选） #

添加devServer配置，优化热更新体验，避免异常刷新：

module.exports = {
  // ...其他配置
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    hot: true, // 启用热模块替换，避免全页面刷新
    open: true, // 自动打开浏览器
    liveReload: false, // 配合hot禁用自动刷新
  }
}

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