In the previous section, we looked at the Webpack configuration file, webpack.config.js, which we need to manually create in the project root directory. In this section, we’ll take a look at how to configure the entry property in Webpack.

The entry entry entry can be used to specify the module from which Webpack starts building a project. You can specify one or more entry starting points by configuring the value of the entry property, which defaults to./ SRC.

There are three forms of entry

Configure the entry property in webpack.config.js. There are three forms of values, of which String and Array are used to configure a single entry. Object is used to configure multiple entries.

  • string: String type, the file path of entry module can be relative path.
  • array: Array type, can pack multiple files into a single file.
  • object: Object type, one for each entryChunk.

Single entry configuration

If you want to configure a single entry file, you can assign a String or Array value to the entry, so that only one chunk is generated. Main is used by default when there is no file object name for the entry configured.

For example, if we wanted to pass a string value to the entry property, we could write something like this:

entry:'./path/file.js'

In addition, if a value of array type is passed in, multiple primary entries will be created and their dependencies directed to a chunk. For example, the following code means that when we execute the command, a.js and b.js will be merged and packaged into the bundle. Js file:

entry:['./path/a.js','./path/b.js'],
Example:

We can look at the use of Entry with a small concrete example. Here’s the code we need:

// function a(){console.log(" This is an a.js file "); } // function b(){console.log(" This is a b.js file "); }

Then configure the webpack.config.js file:

Module. Exports = {entry: ['. / a. s', '. / b.j s'], / / was introduced into the output of an array: {path: __dirname, filename: '. / bundle. Js'}}

Then execute the NPM run build command, and you can see that both the a.js and b.js files are packaged into the bundle.js file, as shown in the figure below:

Multiple entry configuration

If we want to configure multiple entries for Webpack, we can set a value of type Object for Entry. The syntax is as follows:

entry: {[entryChunkName: string]: string|Array<string>}

The object syntax can be cumbersome, but it is the most extensible way to define an entry in an application.

Set key/value pairs in Entry:

entry: {
  key1: value1,
  key2: value2,
  ...        
}

This is the most complete configuration of Entry; the other forms are just simplified versions of it. Each pair of attribute pairs in the object represents an entry file, so you can use this form of entry configuration when configuring multiple pages.

Example:

To separate the application from the third-party library entry, the code for the webpack.config.js configuration file is as follows:

const config = {
 entry: {
  app: './src/app.js',
  vendors: './src/vendors.js'
 }
};

This means that Webpack will create dependency graphs from app.js and vendors. JS, and that these dependency graphs are completely separate and independent of each other. This approach is more common in single-page applications that have only one entry point.

Link: https://www.9xkd.com/