What are loaders and how do they work?

Loaders transform files from different languages or formats into modules that Webpack can understand. They run during the build process and transform files on a per-file basis.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Loaders are processed right-to-left (or bottom-to-top) in the use array.