Loaders allow you to pre-process and transform files as you load them. An example would be converting TypeScript to JavaScript. Let's see an example snippet from the webpack.config.js file:

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

The preceding code snippet tells webpack to process all the text files using a loader named raw-loader, and loads raw UTF-8 content from the file.

Loaders are essentially node modules that is a function like the following one, and the source parameter consists of all the source code as a string:

const loaderUtils = require('loader-utils');

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

There are already predefined loaders that you can use in your projects. The list is located at https://webpack.js.Org/loaders/.

For Locker Service, you can write a custom loader to unpolyfill window properties or DOM properties that need to be protected. We will explore this when we see an example of fixing a broken Locker Service library in the Integrating choices.js into Lightning Components section.