Output management tutorial preparation

First, let's adjust our project file structure tree a little and make things easier. This process follows these next steps:

Begin by locating the print.js file in the project folder, as follows:

  webpack5-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
    |- print.js
  |- /node_modules

Note the addition to our project structure—the print.js file, specifically.

Append the code by adding some logic to the src/print.js file, as follows:

export default function printIt() {
  console.log('This is called from print.js!');
}

You should use the printIt() JavaScript function, as seen in the preceding code block, in the src/index.js file.

Prepare the src/index.js file to import the required external files and write a simple function in it to allow interaction, as follows:

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'Webpack'], ' ');

    btn.innerHTML = 'Click here then check the console!';
    btn.onclick = printIt();
 
    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

We've updated our index.js file with an import of the print.js file at the top and a new printIt(); function button at the bottom.

We must update the dist/index.html file. This update is done in preparation for the entries to be split out, and is illustrated in the following code block:

  <!doctype html>
  <html>
    <head>
      <title>Output Management</title>
      <script src="./print.bundle.js"></script>
    </head>
    <body>
      <script src="./app.bundle.js"></script>
    </body>
  </html>

This preceding HTML script will load in the print.bundle.js file and, below that, the bundle.js and app.bundle.js files.

Next, ensure that the configuration of the project is in line with dynamic entry points. The src/print.js file will be added as a new entry point. The outputs will also be changed so that bundles' names will be dynamically generated based on entry point names. In webpack.config.js, there is no need to change the directory names due to this automatic process. The following code block shows the content of webpack.config.js:

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    output: {
      filename: 'bundle.js',
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

The configuration simply set up new entry points for the new files we have been working on, index.js and print.js.

Make sure you perform a build. Once you run a npm build, you will see the following:

...
Asset           Size      Chunks                  Chunk Names
app.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB  1     [emitted]         print
...

After opening the index.html file in your browser, you will see that Webpack generated the print.bundle.js and app.bundle.js files. We should now check that it worked! If the entry point names are changed or new ones added, the index HTML would still reference the older names. This can be corrected with HtmlWebpackPlugin.

Table of Contents for Output management tutorial preparation

Create new playlist

Sign In

Sign Up

Table of Contents for
Output management tutorial preparation