The next step in the tutorial is to go over the details of the core configuration

Entry

Webpack performs the first step of building by searching from the entry and recursively resolving all the modules that the entry depends on.

The entry configuration is mandatory; failing to do so will result in an exit error from Webpack.

context

Webpack searches for files in relative paths using context as the root directory, which defaults to the current working directory where Webpack was started. If you want to change the default context configuration, you can set it in the configuration file like this:

1 module.exports = {
2   context: path.resolve(__dirname, 'app')
3 }
Copy the code

Note that context must be an absolute path string. In addition, you can set the context by starting the Webpack with the parameter Webpack –context.

The reason for introducing context first is that the paths of Entry and its dependent modules may be described in terms of paths relative to context, and context affects the real files that these relative paths point to.

Entry type

Entry types can be one of the following three types or a combination of them:

In the case of array, when used with the output.library configuration item, only the module with the last entry file in the array is exported.

The Chunk name

Webpack gives each generated Chunk a name. The Chunk name is related to the configuration of the Entry:

• ifentryIf it is a string or array, only one Chunk is generated, and the Chunk name is main.
• ifentryIf the value is an Object, multiple chunks may appear. In this case, the Chunk name is the key name in the object key-value pair.

Configuring a Dynamic Entry

If there are multiple pages in a project that need to be configured with an Entry for each page, but the number of pages may continue to grow, then the Entry configuration may be affected by other factors that prevent it from being written as a static value. The solution is to set Entry as a function to dynamically return the configuration described above, as follows:

1 / / 2 entry: synchronization function () = > {3 return {4 a: / pages/a '. '., 5 b: '/ pages/b', 6} 7}; 9 entry: () =>{10 return new Promise((resolve)=>{11 resolve({12 a:'./pages/a', 13 b:'./pages/b', 14}); 15}); 16};Copy the code

Read the above content combined with the following code reference control ha

Supplementary knowledge: NPX webpack- for executing the webpack.config.js entry file command

The first type: string (entry file is a JS file)

1. Define two JS files to import into main.js

2. Define the configuration file

3. Run NPX webpack to generate the dist folder

4. Found that the import file in HTML has only 1 JS

The second type: array 1. Annotate add.js first

2. Define the configuration file

3. Run NPX webpack to generate the dist folder

The third type: object

1. Comment add.js first

2. Define the configuration file

3. Run NPX webpack to generate the dist folder

Introduce two jS in HTML