基于现有Webpack配置，如何用Oldie、PostCSS为IE生成独立CSS包？

好的，要在你现有Webpack配置基础上生成IE专属的CSS包，我们可以通过多实例ExtractTextPlugin + Oldie PostCSS插件 + HTML条件注释来实现，具体步骤如下：

1. 安装必要依赖 #

首先安装Oldie（专门为IE兼容处理CSS的PostCSS插件）：

npm install oldie --save-dev

2. 配置PostCSS（区分现代浏览器与IE） #

在webpack.config.js中定义两套PostCSS配置：一套用于现代浏览器（保持你原有的配置），另一套加入Oldie处理IE兼容：

// 现代浏览器PostCSS配置（保留你原有的插件，比如autoprefixer）
const postcssModernConfig = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions', 'not ie <= 11']
    })
    // 你原有的其他PostCSS插件（如cssnano等）
  ]
};

// IE专属PostCSS配置，加入Oldie处理兼容
const postcssIEConfig = {
  plugins: [
    require('autoprefixer')({
      browsers: ['ie 10', 'ie 11']
    }),
    // 配置Oldie，按需开启转换规则
    require('oldie')({
      rgba: { filter: true }, // 将rgba颜色转为IE兼容的filter写法
      rem: { replace: true }, // 将rem单位转为px
      opacity: true, // 将opacity转为IE兼容的filter
      pseudo: true, // 修复IE对伪元素的支持
      overflow: true // 修复IE的overflow属性问题
    })
  ]
};

3. 修改Webpack配置（Loader与插件） #

3.1 初始化两个ExtractTextPlugin实例 #

分别用于提取现代浏览器CSS和IE专属CSS：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 提取现代浏览器CSS到styles.css
const extractModernCSS = new ExtractTextPlugin('styles.css');
// 提取IE专属CSS到styles-ie.css
const extractIECSS = new ExtractTextPlugin('styles-ie.css');

3.2 更新Loader规则 #

添加针对IE的SCSS/CSS处理规则，这里推荐通过文件名后缀区分的方式：
给IE专属的样式文件加-ie后缀（如main-ie.scss），然后配置Loader匹配这些文件：

module.exports = {
  // 你的entry、output等原有配置保持不变
  module: {
    loaders: [
      // 其他Loader（如JS、图片等）保持不变
      
      // 现代浏览器SCSS处理
      {
        test: /\.scss$/,
        exclude: /-ie\.scss$/, // 排除IE专属文件
        loader: debug 
          ? 'style-loader!css-loader!postcss-loader?config=postcssModernConfig!sass-loader' 
          : extractModernCSS.extract({
              fallback: 'style-loader',
              use: 'css-loader!postcss-loader?config=postcssModernConfig!sass-loader'
            })
      },
      // IE专属SCSS处理
      {
        test: /-ie\.scss$/, // 匹配IE专属文件
        loader: debug 
          ? 'style-loader!css-loader!postcss-loader?config=postcssIEConfig!sass-loader' 
          : extractIECSS.extract({
              fallback: 'style-loader',
              use: 'css-loader!postcss-loader?config=postcssIEConfig!sass-loader'
            })
      },
      // 同理处理CSS文件
      {
        test: /\.css$/,
        exclude: /-ie\.css$/,
        loader: debug 
          ? 'style-loader!css-loader!postcss-loader?config=postcssModernConfig' 
          : extractModernCSS.extract({
              fallback: 'style-loader',
              use: 'css-loader!postcss-loader?config=postcssModernConfig'
            })
      },
      {
        test: /-ie\.css$/,
        loader: debug 
          ? 'style-loader!css-loader!postcss-loader?config=postcssIEConfig' 
          : extractIECSS.extract({
              fallback: 'style-loader',
              use: 'css-loader!postcss-loader?config=postcssIEConfig'
            })
      }
    ]
  },
  // 暴露PostCSS配置，让Loader可以通过config参数引用
  postcss: () => ({
    postcssModernConfig,
    postcssIEConfig
  }),
  plugins: [
    extractModernCSS,
    extractIECSS,
    // 你的HtmlWebpackPlugin配置
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

如果你不想维护两份样式文件，也可以把样式作为单独的入口，用IE的Loader处理：

// 修改entry配置
entry: {
  main: './src/index.js',
  'styles-ie': './src/styles/main.scss' // 将样式作为IE专属入口
}

4. 调整HTML模板，用条件注释加载IE专属CSS #

在你的HTML模板（如src/index.html）中，添加IE条件注释，让只有IE浏览器加载styles-ie.css：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Application</title>
  <!-- 现代浏览器加载标准CSS -->
  <link rel="stylesheet" href="styles.css">
  <!--[if IE]>
    <!-- 仅IE浏览器加载专属兼容CSS -->
    <link rel="stylesheet" href="styles-ie.css">
  <![endif]-->
</head>
<body>
  <div id="app"></div>
</body>
</html>

5. 验证效果 #

运行Webpack构建后，dist目录下会生成styles.css和styles-ie.css，打开IE浏览器访问页面，会自动加载IE专属的CSS文件，现代浏览器则只加载标准CSS。

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