3.3.2.4 Loaders

Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

At a high level, loaders have two properties in your webpack configuration:

1. ‘test’ property: identifies which file or files should be transformed.
2. ‘use’ property: indicates which loader should be used to do the transforming.

const path = require('path');

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

The configuration above has defined a ‘rules’ property for a single module with two required properties: ‘test’ and ‘use’. This tells webpack’s compiler the following:

• When webpack finds a .txt file inside a require or import statement (a module) use the ‘raw-loader’ to transform it before adding it to the bundle.
• It is important to remember that when defining ‘rules’ in your webpack config, you are defining them under ‘module.rules’ and not ‘rules’. For your benefit, webpack will warn you if this is done incorrectly.