webpack-cli报错ERR_INVALID_ARG_TYPE：path参数应为字符串而非数组

常见出错位置排查 #

这个错误核心是webpack配置里某个需要字符串路径的配置项被传入了数组，以下是最容易踩坑的几个位置：

1. output.path 配置 #

output.path必须是字符串，不能直接传数组。
错误写法：

module.exports = {
  output: {
    path: [__dirname, 'dist'], // 错误：传入了数组
    filename: 'bundle.js'
  }
}

修正：

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'), // 用path.resolve生成合法字符串路径
    filename: 'bundle.js'
  }
}

2. resolve.alias 配置 #

别名映射的路径值不能是数组。
错误写法：

resolve: {
  alias: {
    '@': [__dirname, 'src'] // 错误：数组路径
  }
}

修正：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src') // 字符串路径
  }
}

3. loader配置中的路径参数 #

部分loader的options里的路径参数要求是字符串，比如css-loader的modules.context：
错误写法：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              context: [__dirname, 'src'] // 错误：数组路径
            }
          }
        }
      ]
    }
  ]
}

修正：

modules: {
  context: path.resolve(__dirname, 'src') // 字符串路径
}

4. package.json的scripts命令 #

检查构建命令里有没有错误的数组格式路径：
错误写法：

"scripts": {
  "build": "webpack --mode production --output-path [./dist]"
}

修正：

"scripts": {
  "build": "webpack --mode production --output-path ./dist"
}

快速排查技巧 #

把webpack.config.js里所有涉及路径的配置项逐一核对，确保每个要求字符串路径的地方没有传数组。如果还是找不到问题，直接把所有数组形式的路径替换成path.resolve()生成的字符串后重新构建测试。

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