What are loaders and how do they work?

Beginner

Answer

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.