Webpack未正常向浏览器提供JS文件：Safari可运行Chrome异常

核心症状 #

• Chrome浏览器加载的bundle.js文件内容为index.html代码，而非预期的JavaScript
• Node环境下bundle.js是正常的JS代码
• 旧版本项目无此问题，Webpack配置未修改
• Safari可正常运行，Chrome无法工作

关键信息 #

预期行为 #

预期bundle.js为编译后的JavaScript代码，无HTML内容

实际行为 #

Chrome中查看bundle.js显示完整的index.html结构

Webpack配置片段 #

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  devServer: {
    static: './dist',
    hot: true
  }
};

文件结构 #

• src/
  • index.js
  • components/
    • App.js
• dist/
  • index.html
  • bundle.js
• webpack.config.js
• package.json

排查建议 #

• 强制刷新Chrome页面（Ctrl+Shift+R），清除浏览器缓存后重试
• 检查本地开发服务器的路由配置：确认请求/bundle.js时返回正确的文件，而非默认的index.html
• 验证Webpack的output配置是否正确，确保bundle.js生成在正确的目录下
• 使用Chrome无痕模式测试，排除浏览器扩展程序的干扰
• 对比旧版本项目的dist目录结构，确认是否存在文件覆盖或路径冲突

注意：此问题仅出现在Chrome浏览器，Safari无异常，说明可能与浏览器缓存或特定请求处理逻辑有关

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