In this exercise, we will introduce Webpack’s rule system and practice defining a rule for dealing with .txt files in our project.

Webpack uses rules to know what to do with different file types. Webpack expects an array of rules in a configuration option called module. The syntax looks like:

module.exports = 
{
  module: 
  {
    rules: []
  }
}

A rule has a test configuration option defined as a regular expression. If a file matches the regular expression, Webpack will use the rule on that file. For example, if we define test as \.txt$\i, the rule will apply to files ending in .txt.

The other part of the rule needs to tell Webpack what to do with files that match the test. That part of the rule varies by file type.

For .txt files, the rule inside of rules would look like:

rules: 
[
  {
    test: /\.txt$/i,
    type: 'asset/source'
  }
]

Here, type: 'asset/source' is telling Webpack that .txt files are an asset that can be added directly to the source code, not requiring much processing. Once we add a rule for a file type, we can import files of that type into our code. Here’s an example with a .txt file:

import Text from './example.txt';
document.querySelector('h1').innerHTML = Text;

Previewing this code replaces the content of the page h1 element with the file content.

Let’s get some practice defining Webpack rules!