Webpack启动报错：configuration.module.rules[2].loader需为非空字符串如何解决？

错误原因 #

你在webpack/development.js和webpack/production.js两个配置文件中，处理普通sass/css的规则里错误使用了loader字段传递多个loader数组。
Webpack规则约定：

• 仅配置单个loader时，可以使用loader: "xxx-loader"字符串格式
• 配置多个loader时，必须使用use字段传递loader数组，不能使用loader字段

修改方案 #

1. 修改webpack/development.js配置 #

找到如下代码段：

{
  test: /\.(s(a|c)ss|css)$/,
  exclude: /\.module\.(s(a|c)ss)$/,
  loader: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
      },
    },
  ],
},

将字段loader改为use即可：

{
  test: /\.(s(a|c)ss|css)$/,
  exclude: /\.module\.(s(a|c)ss)$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
      },
    },
  ],
},

2. 修改webpack/production.js配置 #

找到如下代码段：

{
  test: /\.(s(a|c)ss|css)$/,
  exclude: /\.module\.(s(a|c)ss)$/,
  loader: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
      },
    },
  ],
},

同样将字段loader改为use即可：

{
  test: /\.(s(a|c)ss|css)$/,
  exclude: /\.module\.(s(a|c)ss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
      },
    },
  ],
},

修改完成后重新执行yarn start即可正常启动。

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