常用Loader分类与使用场景

Webpack的Loader用于对模块的源代码进行转换，它们可以将不同类型的文件转换为Webpack能够处理的模块。Loader的分类和使用场景多样，理解它们的特点能显著提升构建效率。

文件资源类Loader

这类Loader用于处理静态资源文件，如图片、字体等。常见的包括：

• file-loader：将文件输出到输出目录并返回URL

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
}

• url-loader：类似file-loader但可设置文件大小阈值转为DataURL

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,  // 8KB以下文件转为base64
        fallback: 'file-loader'
      }
    }
  ]
}

• raw-loader：将文件作为字符串导入

样式处理类Loader

处理CSS及相关预处理器文件：

• css-loader：解析CSS中的@import和url()
• style-loader：将CSS注入到DOM

{
  test: /\.css$/,
  use: [
    'style-loader',  // 顺序从后往前执行
    'css-loader'
  ]
}

• sass-loader：编译Sass/SCSS文件

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

• postcss-loader：配合PostCSS进行CSS后处理

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
}

JavaScript编译类Loader

处理ES6+语法转换和代码质量检查：

• babel-loader：使用Babel转译JS

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

• ts-loader：编译TypeScript

{
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/
}

• eslint-loader：代码规范检查（已废弃，推荐使用ESLint Webpack插件）

模板处理类Loader

处理各种模板文件：

• html-loader：导出HTML为字符串

{
  test: /\.html$/,
  use: {
    loader: 'html-loader',
    options: {
      minimize: true
    }
  }
}

• pug-loader：编译Pug模板

{
  test: /\.pug$/,
  use: ['pug-loader']
}

特殊用途Loader

解决特定场景需求的Loader：

• svg-inline-loader：去除SVG冗余代码并内联
• worker-loader：将脚本注册为Web Worker

{
  test: /\.worker\.js$/,
  use: { loader: 'worker-loader' }
}

• vue-loader：处理Vue单文件组件

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

Loader组合策略

实际项目中常需要组合多个Loader：

1. 处理字体文件示例：

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/'
      }
    }
  ]
}

2. 完整CSS处理链：

{
  test: /\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

性能优化相关Loader

针对构建性能优化的Loader：

• cache-loader：缓存Loader处理结果

{
  test: /\.js$/,
  use: [
    'cache-loader',
    'babel-loader'
  ]
}

• thread-loader：在worker池中运行耗时的Loader

{
  test: /\.js$/,
  use: [
    {
      loader: 'thread-loader',
      options: {
        workers: 2
      }
    },
    'babel-loader'
  ]
}

自定义Loader开发

当现有Loader不满足需求时，可以开发自定义Loader：

module.exports = function(source) {
  // 简单的替换Loader示例
  return source.replace(/console\.log\(.*?\);?/g, '');
};

在Webpack配置中使用：

{
  test: /\.js$/,
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {...}
    }
  ]
}