使用Webpack 5时Axios加载根目录app.config.json报404的问题

问题原因 #

Webpack 5 的 webpack-dev-server 默认仅提供打包产物及指定静态目录下的文件，项目根目录的 app.config.json 不在默认服务范围内，因此无法通过浏览器或 Axios 访问。

开发环境配置（webpack-dev-server） #

修改 Webpack 配置文件（webpack.config.js），在 devServer 中添加 static 配置，将项目根目录纳入静态资源服务范围：

const path = require('path');

module.exports = {
  // 其他已有配置（entry、module、plugins等）
  devServer: {
    static: [
      {
        // 指定项目根目录为静态资源目录
        directory: path.resolve(__dirname),
        publicPath: '/',
        // 禁止列出目录内容，避免暴露根目录下其他文件
        serveIndex: false,
        // 监听文件变化，修改后自动刷新服务
        watch: true,
        // 仅允许访问app.config.json，进一步限制访问范围
        allowlist: [/app\.config\.json$/],
      }
    ],
    // 其他devServer配置（port、hot等）
  }
};

配置完成后，webpack-dev-server 会将根目录下的 app.config.json 映射到服务根路径，此时访问 localhost:8080/app.config.json 或通过 axios.get('/app.config.json') 即可正常加载文件，且修改文件后无需重启服务。

生产环境配置 #

为确保生产构建后仍能正常访问该文件，需使用 copy-webpack-plugin 将 app.config.json 复制到打包输出目录（通常为 dist）：

1. 安装插件：

npm install copy-webpack-plugin --save-dev

2. 在 Webpack 配置中添加插件：

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // 其他已有配置
  plugins: [
    // 其他已有插件
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, 'app.config.json'), to: '.' }
      ]
    })
  ]
};

生产构建时，app.config.json 会被复制到 dist 目录根路径，部署后依然可通过 /app.config.json 访问。

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