Understanding Webpack Loaders

// loader.js
module.exports = function (content) {
  // Process the input source, here simply adding a comment line at the beginning
  const processedSource = `// This is a custom loader\n${source}`

  // Return the processed result
  return processedSource
}

module.exports.raw = true

// async-loader.js
module.exports = function (source) {
  // Get the loader context, the this object
  const callback = this.async()

  // Simulate an asynchronous operation (e.g., fetching data from the network)
  setTimeout(() => {
    const simulatedData = { message: 'This is simulated asynchronous data' }
    const transformedSource = source.replace(
      '/_ async-data-placeholder _/',
      JSON.stringify(simulatedData)
    )

    // Call the callback function to pass the processed source code to the next loader
    callback(null, transformedSource)
  }, 1000) // Simulate an asynchronous operation that takes 1 second
}

// webpack.config.js
module: {
  rules: [
    {
    test: /\.js$/,
    use: ['loader3', 'loader2', 'loader1'],
    },
  ],
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // Matches files ending in .js
        use: ['babel-loader'], // Uses babel-loader for processing
        options: {
          presets: ['@babel/preset-env'],
        },
      },
      {
        test: /\.css$/, // Matches files ending in .css
        use: ['style-loader', 'css-loader'], // Uses css-loader first, then style-loader
      },
    ],
  },
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [require.resolve('babel-loader')],
      },
      {
        test: /\.css$/,
        use: [require.resolve('style-loader'), require.resolve('css-loader')],
      },
    ],
  },
}

// webpack.config.js
const babelLoader = require.resolve('babel-loader')
const styleLoader = require.resolve('style-loader')
const cssLoader = require.resolve('css-loader')

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [babelLoader],
      },
      {
        test: /\.css$/,
        use: [styleLoader, cssLoader],
      },
    ],
  },
}

module.exports = function (source) {
  return source
}

const { transform } = require('@babel/core')

function loader(source) {
  // Get the options configured for the Loader
  const options = this.getOptions()

  console.log('babel-loader: ', options)

  // Use Babel to transform the code
  const transformedCode = transform(source, {
    ...options,
    sourceMap: true,
  }).code

  return transformedCode
}

module.exports = loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['./babel-loader'],
      },
    ],
  },
}

 npm install less

const less = require('less')

module.exports = function (source) {
  // Use the less package to parse the LESS code
  less.render(source, (error, result) => {
    if (error) {
      this.emitError(error) // Pass the error to Webpack for handling
      return
    }

    // Return the converted CSS code
    this.callback(null, result.css, result.map)
  })
}

module.exports = function (source) {
  console.log('css-loader source: ', source)

  const classRegex = /(?<=\.)(._?)(?={)/g // Regular expression to get all class names in the string
  const classKeyMap = Object.fromEntries(
    source.match(classRegex).map((str) => [str.trim(), str.trim()])
  ) // Extract the original CSS class names from the string
  return `/\*\***CSS_SOURCE**${source}_//\*_**CSS_CLASSKEYMAP**${JSON.stringify(classKeyMap)}_/`
}

module.exports = function (source) {
  console.log('style-loader', source)

  const cssSource = source.match(/(?<=**CSS_SOURCE**)((.|\s)_?)(?=\*\/)/g) // Get the CSS resource string
  const classKeyMap = source.match(/(?<=**CSS_CLASSKEYMAP**)((.|\s)_?)(?=\*\/)/g) // Get the CSS class name Map

  console.log('classKeyMap', classKeyMap)

  const script = `
    var style = document.createElement('style');
    style.innerHTML = ${JSON.stringify(cssSource)};
    document.head.appendChild(style);

    // Export classKeyMap if available
    ${classKeyMap !== null ? `module.exports = ${classKeyMap}` : ''}

`

  return script
}

const loaderUtils = require('loader-utils')

function fileLoader(source) {
  // Use the interpolateName function from loader-utils to generate a filename based on the content
  const filename = loaderUtils.interpolateName(this, '[name].[hash].[ext]', {
    content: source,
  })

  // this.emitFile(filename, source): Used to output the file to the output directory. It takes the filename and file content as parameters. This ensures the file is included in the output and can be referenced by other parts of the build process.
  this.emitFile(filename, source)

  return `module.exports="${filename}"`
}

// Set the raw property of the loader to true, indicating that the loader processes binary data. Here, it means that the file content is read and output as a Buffer.
fileLoader.raw = true

module.exports = fileLoader

function urlLoader(source) {
  console.warn('url-loader: ', source.size)

  // Get the options (configuration) for the loader
  const options = this.getOptions() || { limit: 20480 }

  // If the file size is less than the specified threshold, convert it to a Data URL
  if (options.limit && source.length < options.limit) {
    const base64 = Buffer.from(source, 'binary').toString('base64')
    return `module.exports="data:${
      this.resourceMimeType || 'application/octet-stream'
    };base64,${base64}"`
  }

  // Otherwise, use file-loader to handle it
  return require('../file-loader').call(this, source)
}

urlLoader.raw = true
module.exports = urlLoader

{
test: /\.(png|jpg)$/,
use: [
    {
      loader: "./loaders/url-loader",
      options: {
        limit: 20480, // Convert images smaller than 20kb to base64
      },
    },
  ],
}

// rm-selection-loader.js
// Remove ::selection in style files because ::selection is difficult to cancel
module.exports = function runtime(params) {
 return params.replace(/::selection \{[^}]+\}/g, "");
};

// config.js
config.module
.rule("less-in-node_modules")
.use("custom")
.before("css-loader")
.loader(path.resolve(\_\_dirname, "./rm-selection-loader.js"));