React SSR项目Webpack CSS Loader配置错误求助

核心问题分析 #

当前存在两个明确错误：

1. Webpack规则冲突：同一Rule同时定义了use和loader属性，Webpack不允许这种写法
2. CSS解析失败：SSR场景下服务端与客户端的CSS Loader配置不匹配，且服务端无法使用style-loader（无DOM环境）

一、修复规则冲突问题 #

服务端配置中JS/JSX规则同时使用了use和loader，需统一改为use数组格式，示例如下：

// 错误写法
{
  test: /\.(js|jsx)$/,
  loader: 'babel-loader', // 冲突项
  use: [...]
}

// 正确写法
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react']
      }
    }
  ]
}

二、SSR专属CSS Loader配置 #

服务端Webpack配置（webpack.server.js） #

服务端无DOM环境，不能使用style-loader，需用mini-css-extract-plugin提取CSS内容，后续注入HTML模板：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  target: 'node',
  entry: './src/server/index.js',
  output: {
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: false, // 启用CSS Modules则设为true
              importLoaders: 1
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'server-styles.css' })
  ],
  resolve: { extensions: ['.js', '.jsx'] }
};

客户端Webpack配置（webpack.client.js） #

客户端可根据环境选择style-loader（开发环境注入DOM）或mini-css-extract-plugin（生产环境提取文件）：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  target: 'web',
  entry: './src/client/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: false,
              importLoaders: 1
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'client-styles.css' })
  ],
  resolve: { extensions: ['.js', '.jsx'] },
  devtool: 'source-map'
};

必要依赖安装 #

执行以下命令安装所需Loader和插件：

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader mini-css-extract-plugin

后续注意事项 #

• 服务端渲染时，需将提取的server-styles.css内容注入到HTML模板的<style>标签中，或通过<link>标签引入
• 若使用CSS Modules，需将css-loader的modules设为true，并在组件中通过import styles from './xxx.css'引用类名

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