排查React+Webpack项目中package.json可通过站点URL直接访问的问题

1. 开发服务器静态资源配置检查 #

• 打开webpack.config.js，查看devServer里的static（旧版本为contentBase）配置。如果设为'./'（项目根目录），会把根目录下所有文件包括package.json都暴露成可访问的静态资源，应该改成指向public这类专门存放静态资源的目录。

2. 生产构建产物排查 #

• 查看生产构建后的输出目录（一般是dist），看看里面有没有package.json。如果存在，大概率是copy-webpack-plugin配置错误，把根目录的package.json复制到了构建目录里，检查插件配置，删掉对package.json的复制规则。

3. 部署服务器规则配置 #

• 生产环境部署时，检查Nginx/Apache等服务器的配置：
  • 确认服务器的静态根目录是不是只指向构建后的dist目录，而不是整个项目根目录；
  • 添加规则禁止访问敏感文件，比如Nginx可以加这段配置：

    location ~ /(package|yarn|npm)\.json$ {
        deny all;
        return 404;
    }
    

4. Webpack打包逻辑检查 #

• 排查项目代码里有没有直接import '../package.json'或require('../package.json')的情况。虽然Webpack会把它打包成模块，但某些配置下可能会生成可单独访问的文件。如果需要获取package里的信息（比如版本号），建议只引入需要的字段，别引入整个文件，同时确保Webpack不会把原始文件输出到构建目录。

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