面试题：Webpack加载器和插件如何协同处理CSS资源？

1. 满足需求的Webpack配置

样式模块化：使用 css-loader 的 modules 特性实现样式模块化。在 webpack.config.js 中配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
           {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
        ]
      }
    ]
  }
};

自动添加浏览器前缀：使用 postcss-loader 并配合 autoprefixer 插件来自动添加浏览器前缀。在 webpack.config.js 中继续完善配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
           {
              loader: 'css-loader',
              options: {
                modules: true
              }
            },
           {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require('autoprefixer')
                  ]
                }
              }
            }
        ]
      }
    ]
  }
};

2. 加载器和插件执行顺序及原理

加载器执行顺序：从右到左（从下到上）。在上述 css 文件的加载中，先由 postcss-loader 处理，它会根据 autoprefixer 插件规则为 CSS 代码添加浏览器前缀；接着 css-loader 处理，实现样式模块化，将 CSS 代码转化为 JavaScript 可引入的模块；最后 style-loader 将处理后的 CSS 插入到 DOM 中。这种顺序是因为 Webpack 是链式调用加载器，后配置的先执行，这样才能保证每个加载器处理的数据是前一个加载器处理后的结果。
插件执行原理：插件在 Webpack 构建流程的特定时机介入，执行自定义的任务。autoprefixer 作为 postcss-loader 中的插件，在 postcss-loader 执行过程中，按照其自身逻辑分析和处理 CSS 代码，为需要添加前缀的属性添加相应的浏览器前缀。插件通过 Webpack 的 Tapable 机制，监听特定的构建事件（如 build、compile 等），在合适的时机执行其功能，与加载器专注于文件转换不同，插件更侧重于对整个构建过程的控制和扩展。

星途面试题库

面试题：Webpack加载器和插件如何协同处理CSS资源？

知识考点

面试题答案

1. 满足需求的Webpack配置

2. 加载器和插件执行顺序及原理