React-Redux项目配置webpack css-loader后模块解析错误解决求助

问题根源 #

你遇到的编译错误和css-loader本身无关，是webpack配置编写错误导致babel-loader配置被覆盖，JSX语法无法被正常解析。两种错误写法的问题如下：

• 第一种写法：配置文件中定义了两次module.exports，后定义的仅包含css-loader规则的配置会完全覆盖之前包含babel-loader的配置，导致webpack没有对应loader处理.js文件，无法识别JSX语法。
• 第二种写法：同一个module.exports对象中声明了两次module字段，JS对象的重名字段会被后定义的内容覆盖，同样导致babel-loader规则丢失。

解决方案 #

将两类loader规则合并到同一个module.rules数组中即可，同时建议搭配style-loader使用（负责将css-loader解析后的样式注入到页面），正确配置参考如下：

module.exports = {
  // 保留你原本的entry、output、plugins等其他配置项
  module: {
    rules: [
      // 处理JS/JSX的babel-loader规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // 处理CSS的规则，loader执行顺序为从右到左，先执行css-loader再执行style-loader
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ]
  }
};

请同时确认你的Babel配置文件（.babelrc或babel.config.json）中已添加@babel/preset-react预设，用于转译JSX语法，配置参考：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

css-loader对Redux的影响说明 #

css-loader的作用仅为解析CSS文件中的@import、url()等语法，不会处理任何JS业务逻辑，完全不会对Redux对象产生影响。

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