一：引言

Webpack中CSS-Loader和Style-Loader在项目配置中会使用到，那么他们的区别是什么呢？

二：作用

1：CSS-Loader主要用于处理CSS文件中的@import和url()等依赖，将其转换为Webpack可以识别的模块

2：Style-Loader则是将处理后的CSS代码通过JavaScript动态注入到DOM的<style>标签中

三：类别

（1）职责上

‌css-loader=>主要是解析解析 @import 和 url() 资源路径

style-loader=>主要是将css注入DOM的<style>标签

（2）输出上

‌css-loader=>JS模块、CSS字符串

style-loader=>运行时动态创建样式标签

（3）编译上

‌css-loader=>打包时处理

style-loader=>浏览器运行时执行

（4）生产环境适用上

‌css-loader=>必须

style-loader=>可被替代（mini-css-extract-plugin）

（5）HMR支持上

‌css-loader=>间接支持

style-loader=>直接支持

（6）典型配置位置上

‌css-loader=>后置loader（先执行）

style-loader=>前置loader（后执行）

四：代码

const isDev = process.env.NODE_ENV === 'development';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 开发环境用 style-loader 实现热更新，生产环境提取 CSS
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 启用 CSS Modules 并定义类名生成规则
                localIdentName: isDev 
                  ? '[path][name]__[local]'  // 开发环境可读类名
                  : '[hash:base64:8]'        // 生产环境短哈希
              },
              sourceMap: isDev              // 开发环境开启 SourceMap
            }
          },
          'postcss-loader'                  // 添加浏览器前缀等处理
        ]
      }
    ]
  },
  plugins: [
    !isDev && new MiniCssExtractPlugin({     // 生产环境提取 CSS
      filename: 'css/[name].[contenthash:8].css'
    })
  ].filter(Boolean)
};

五：流程

（1）css-loader先处理

       解析 CSS 文件中的 @import 语句

       转换 url(image.png) 为 require('./image.png')

       支持 CSS Modules（需配置 modules: true）

（2）style-loader后处理

       将处理后的 CSS 文本包装成 JS 模块

       运行时通过 document.createElement('style') 动态注入样式

       实现样式热替换（HMR）

六：总结

1：开发环境‌：组合使用（style-loader + css-loader）获得最佳 HMR 体验

‌2：生产环境‌：用 mini-css-extract-plugin.loader 替代 style-loader 以生成独立 CSS 文件

‌3：特殊场景‌：SSR 项目需使用 isomorphic-style-loader 避免 document 未定义错误