Using entry points is probably the easiest way of performing code splitting. It is a manual operation and is, therefore, not automated like other methods.

We will now look at the development of splitting one module from the main bundle. To do this, we will begin with some practical work. From there, we will go over the concepts of duplication and dynamic imports.

We will now return to the project we were working on in Chapter 1, Introduction to Webpack 5. This time, we will utilize what we have learned so far in this chapter.

First, create a directory to work in. In this case, we are using the directory name we used in the last chapter. It might be a good idea to follow this same convention and, that way, you will be able to follow the course of the project's development as you continue through this book.

In the following example, we will do the following:

1. Organize a project folder structure to start a project that shows how entry points work. You should build this set of directories in your practice project directory. This is done in the same way as creating folders on your desktop. For the sake of this example, we will call this folder webpack5-demo (but you can choose any name you want):

package.json
webpack.config.js
/dist
/src
 index.js
/node_modules
/node_modules/another-module.js

2. Be sure to add the last line of text (in bold), if it is missing from the code you are using. This can be done on a command line; if that's what you decide to use, please refer to Chapter 1, Introduction to Webpack 5, for guidance. You may have noticed the inclusion of another-module.js. You might not find this a typical build but you will need to include this for our example.

To follow this project development, using your integrated development environment (IDE) or notepad, you should create each of the preceding files and folders. The / character indicates a folder. Note the another-module.js file; this rests in the /node_modules directory.

We will now edit and compile a build, beginning with the another-module.js file.

3. Open another-module.js in your IDE of choice or a notepad:

import _ from 'lodash';
console.log(
  _.join(['Another', 'module', 'loaded!'], ' ')
 );

// webpack.config.js

 const path = require('path');
 module.exports = {
   mode: 'development',
   entry: {
     index: './src/index.js',
     another: './src/another-module.js'
 },
 output: {
   filename: '[name].bundle.js',
   path: path.resolve(__dirname, 'dist')
  }
 };

The file essentially imports lodash, ensuring the module that is loaded is recorded in the console log, setting the Webpack build mode to development, and setting entry points that Webpack begins mapping the assets in the application for bundling through and sets an output bundle name and location.

4. Now, run a build with npm by entering the location of the context directory (the one you are developing in) in the command line and type the following:

npm run build

This is all you need to produce a bundle output or development application.

5. Then, check for successful compilation. When a build is run in your command line, you should see the following message:

...
 Asset Size Chunks Chunk Names
 another.bundle.js 550 KiB another [emitted] another
 index.bundle.js 550 KiB index [emitted] index
 Entrypoint index = index.bundle.js
 Entrypoint another = another.bundle.js
 ...

Success! However, some potential problems might occur when using entry points that a developer should be conscious of:

• If there are duplicated modules between entry chunks, they will be included in both bundles.

• They can't be used to dynamically split code using the programming logic of the application. 

Now, we will cover preventing duplication.