Common Loader classifications and usage scenarios

Webpack Loaders are used to transform the source code of modules, enabling the conversion of different types of files into modules that Webpack can process. Loaders are categorized into various types with diverse use cases, and understanding their characteristics can significantly improve build efficiency.

File Resource Loaders

These Loaders handle static resource files such as images and fonts. Common examples include:

• file-loader: Outputs files to the output directory and returns their URLs

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

• url-loader: Similar to file-loader but can convert files to DataURLs if they are below a size threshold

{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,  // Files under 8KB are converted to base64
        fallback: 'file-loader'
      }
    }
  ]
}

• raw-loader: Imports files as strings

Style Processing Loaders

These Loaders handle CSS and related preprocessor files:

• css-loader: Resolves @import and url() in CSS
• style-loader: Injects CSS into the DOM

{
  test: /\.css$/,
  use: [
    'style-loader',  // Execution order is from last to first
    'css-loader'
  ]
}

• sass-loader: Compiles Sass/SCSS files

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

• postcss-loader: Works with PostCSS for CSS post-processing

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

JavaScript Compilation Loaders

These Loaders handle ES6+ syntax transformation and code quality checks:

• babel-loader: Transpiles JavaScript using Babel

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

• ts-loader: Compiles TypeScript

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

• eslint-loader: Checks code style (deprecated; recommended to use the ESLint Webpack plugin instead)

Template Processing Loaders

These Loaders handle various template files:

• html-loader: Exports HTML as strings

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

• pug-loader: Compiles Pug templates

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

Special-Purpose Loaders

These Loaders address specific use cases:

• svg-inline-loader: Removes redundant SVG code and inlines it
• worker-loader: Registers scripts as Web Workers

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

• vue-loader: Processes Vue single-file components

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

Loader Combination Strategies

In real-world projects, multiple Loaders are often combined:

1. Example for handling font files:

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

2. Complete CSS processing chain:

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

Performance Optimization Loaders

These Loaders optimize build performance:

• cache-loader: Caches Loader processing results

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

• thread-loader: Runs time-consuming Loaders in a worker pool

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

Custom Loader Development

When existing Loaders don't meet requirements, custom Loaders can be developed:

module.exports = function(source) {
  // Example of a simple replacement Loader
  return source.replace(/console\.log\(.*?\);?/g, '');
};

Usage in Webpack configuration:

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