webpack entry

On the one we talked about webpack profile webpack.config.js , we need to manually create the file in the project root directory. After you create To configure it, in this section we look at how to configure webpack entrance, which is entry property.

entry entry can be used to specify the webpack is built. By configuring entry attribute, one or more entry points can be specified. The default value is ./src .

Three forms of entry

Configure the entry attribute in webpack.config.js . There are three types of values. string and array used to configure a single entry. object used to configure multiple entrances.

• string : string type, the file path of the entry module can be a relative path.
• array : Array type, multiple files can be packaged into one file.
• object : Object type, each entry generates a Chunk .

Single entry configuration

To configure a single file inlet, you can give entry specify a string or array value type, so that only generate a chunk , when there is no entry in the configuration file object name, the default main .

For example, if we want to entry attribute, we can write it like this:

entry:'./path/file.js'

In addition, if the value passed in is an array type, multiple main entrances will be created and their dependencies will be directed to a chunk . For example, the following code indicates that when we execute the command, a.js and b.js will be combined and packaged into the bundle.js file:

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

Example:

We can look at the use of entry through a specific small example. Here is the code we need:

// a.js文件
function a(){
    console.log("这是一个a.js文件");
}

// b.js文件
function b(){
    console.log("这是一个b.js文件");
}

Then configure the webpack.config.js file:

module.exports = {
    entry:['./a.js','./b.js'],  // 传入一个数组
    output:{
        path:__dirname,
        filename:'./bundle.js'
    }
}

Then execute the npm run build command, you can see that the a.js and b.js files are packaged into the bundle.js file at the same time, as shown in the following figure:

Multiple entry configuration

If we want to configure multiple entries webpack , we can set a object type entry The syntax is as follows:

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

The object syntax will be more cumbersome, but this is the most extensible way to define an entry in an application.

A simple point of understanding is actually to set key-value pairs entry

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

This is the most complete entry , other forms are just simplified forms. Each pair of attributes in the object represents an entry file, so this form of entry configuration can be used for multi-page configuration.

Example:

To realize the separation of application and third-party library entry, webpack.config.js configuration file is as follows:

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

This means that webpack will app.js and vendors.js , and these dependency graphs are completely separated and independent of each other. This approach is more common in single-page applications with only one entry point.

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