It's been a long tutorial and some of your code might have gone astray. It's good practice to clean up this code and check for anything erroneous.

Cleaning up is a good habit to get into. We won't be using a lot of assets in the next section, Understanding output management, so let's start there. 

1. We begin wrapping up with the project directories, project tree. Let's check them to see whether they are right. It should something like the following:

  webpack5-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- data.xml
    |- sample-font.woff
    |- sample-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

As we are wrapping up, you should remove the files that correspond to the emboldened text in the preceding code block.

This should give you a good idea of what your project files and folders look like. Ensure that all the files we have been using are there and in the appropriate folder.

2. Let's check the formatting of our configuration.

A lot of work has been done on webpack.config.js, and we must take care that the contents are formatted correctly. Please refer to the following code block and check it against your own to ensure this is correct. It is often useful to count the number of { and beautify your code with a conventional structure to make this process easier:

  const path = require('path'); module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /.(csv|tsv)$/,
          use: [
            'csv-loader'
          ]
        },
        {
          test: /.xml$/,
          use: [
            'xml-loader'
          ]
        }
      ]
    }
  };

Notice the extensive reference to CSS, images files, fonts such as .woff, and data files in separate handlers such as .csv and .xml. All of this is important, and you should take the time to make sure the scripting is accurate as this has been an extensive topic and practical exercise, so a lot of things could have been overlooked.

3. Next, we need to check the scripting of the src/index.js file, as follows:

  import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';
  import Data from './data.xml';
 
  function component() {
    const element = document.createElement('div');
 
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'Webpack'], ' ');
    element.classList.add('hello');
 
    // Add the image to our existing div.
    const myIcon = new Image();
    myIcon.src = Icon;
 
    element.appendChild(sampleIcon);
 
    console.log(Data);

    return element;
  }

  document.body.appendChild(component());

Once again, we are wrapping up here so that the code is reusable after having followed multiple tutorials using it, so be sure to remove the emboldened text in your version.

We've gone through an extensive list of asset management operations and have concluded with the project tidying process. All of your code should look like the previous code blocks in the wrapping-up section for it to operate correctly.

You should now have a sound understanding of how Webpack manages these assets, and how to manage them when working with Webpack. With the file structure and code cleaned through and tidied, we are now best placed to begin output management.