Custom và sử dụng nhiều loại loader khác nhau trong webpack

option-loader.js

// Sử dụng với 1 loader: loader (sử dụng query parameter)
{
  test: /\.(png|jpg)$/,
  loader: 'url-loader?name=[path][name].[ext]&limit=10240'
}

// Sủ dụng với nhiều loader trong 1 lần load ví dụ: loaders
{
  test: /\.css$/,
  // loader: extractCSS.extract(["css"])
  exclude: /(node_module|bower_components)/,
  loaders: ['style', 'css?sourceMap', 'resolve-url', 'postcss']
}
  
//Sử dụng loader với query (thay vì sử dụng query parameter như trên)
{
  test: /\.(png|jpg)$/,
  loader: 'url-loader',
  query: {
    limit: 10240,
    name: '[path][name].[ext]'
  }
}

// Sử dụng loader với nhiều loader và mỗi loader chức nhiều query
{
  test: /\.(gif|svg)$/,
  loaders: [
    'file-loader?name=[path]img-[sha512:hash:base64:7].[ext]',
    `image-webpack?{optimizationLevel: 7, interlaced: false, 
      pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}`
  ]
}