如何将Webpack及各类配置文件移出项目根目录管理？

绝对有更清爽的管理方式！把一堆.eslintrc、.prettierrc这类配置文件堆在根目录，时间久了确实会显得乱糟糟的，找文件都费劲。下面分享几个我在项目里亲测好用的方案，你可以根据项目规模、工具链偏好来选：

1. 集中到专门的配置文件夹 #

创建一个config/（或者隐藏的.config/）文件夹，把所有配置文件都移进去。不过要注意，部分工具默认只会读取根目录的配置文件，所以需要手动指定配置路径：

• 可以在package.json的脚本里指定：

  {
    "scripts": {
      "lint": "eslint --config config/.eslintrc src/",
      "format": "prettier --config config/.prettierrc --write src/"
    }
  }
  

• 对于Babel这类工具，还可以通过环境变量指定：BABEL_CONFIG=config/.babelrc npm run build
• 像editorconfig，有些编辑器支持自定义路径，或者你可以在根目录放一个空的.editorconfig，里面用root = true然后引入子目录的配置：

  root = true
  [*]
  config_file = config/.editorconfig
  

2. 合并到package.json中 #

很多工具都支持直接读取package.json里的对应字段，这样就能删掉那些单独的配置文件，大幅精简根目录：
比如在package.json里添加这些配置段：

{
  "eslintConfig": {
    "extends": "eslint:recommended",
    "rules": {
      "no-unused-vars": "warn"
    }
  },
  "prettier": {
    "singleQuote": true,
    "semi": false
  },
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

这种方式特别适合配置内容不复杂的小型项目，不用来回切换多个文件。

3. 使用工具的现代化配置格式 #

很多工具现在都支持JS格式的配置文件（比如eslint.config.js、prettier.config.js），这类文件不仅可以写逻辑，还能模块化，而且你可以把它们统一放到config/文件夹里。
比如eslint.config.js（ESLint v8.23+支持的新格式），你可以在根目录创建一个入口文件，引入config/里的配置：

// 根目录 eslint.config.js
import eslintConfig from './config/eslint.config.js';
export default eslintConfig;

这样既保持了根目录简洁，又能灵活管理配置逻辑。

4. 拆分环境变量文件 #

对于.env这类环境变量文件，建议按环境拆分（.env.development、.env.production），然后可以把它们放到env/文件夹，通过工具指定加载路径：
比如用dotenv的时候：

// 在项目入口文件里
require('dotenv').config({ path: './env/.env.development' });

这样不同环境的变量隔离更清晰，也不会在根目录堆一堆env文件。

注意事项 #

• 迁移配置前，一定要测试工具是否能正确读取新路径的配置，避免构建或校验失败；
• 如果是团队项目，要和队友统一方案，把配置路径的规则写到项目文档里，避免混乱。

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