The last two articles analyzed the overall WebPack packaging process (juejin.cn/post/700202…) And loader trigger time and execution process (juejin.cn/post/700239…) This article will analyze how WebPack handles modules.

We all know that WebPack will treat all front-end resources as modules, but how does webPack recognize and handle different modular specifications (AMD, CMD, commonJS, UMD, ES6) and different introduction methods (paths, aliases, etc.)?

1. What is webpack module

Simply put, require, import, define, and require, @import (CSS file), and url(…). Any introduced feature block can be called a module.

2. How does WebPack parse modules

As you can see from the source, WebPack parses files by introducing enhanced-resolve (an enhanced version of require. Resolve). The library will parse the imported resources in require or import statements into the absolute path of the imported file, and then load the resources by reading the file.

Take import as an example. Common import methods are as follows:

import x from 'xx'; // import x from './xx/xx'; // import x from './xx'; Import x from '@xx/xx'; // Alias is introducedCopy the code

To understand Enhanced resolve, it’s a good idea to take a look at Node module resolution. At this point, enhanced- convergent alias and high support configurability are major components that link the entire process together via Tapable.

3. What are the Webpack parsing rules

Parsing rules are distinguished by paths. Parsing rules vary with introduction methods. The parsing flow chart is as follows:

  • Absolute path: Is already the absolute path to the file and does not need to be parsed, although projects rarely write this.
  • Relative path: in this case, useimport 或 requireThe directory in which the resource files reside is considered a context directory.
  • Module path: inresolve.modulesAll directory retrieval modules specified in. You can also configure an alias to replace the initial module path. For details, seeresolve.aliasConfiguration options.
  • Alias path: inresolve.aliasSpecify the file path corresponding to the alias.
resolve: {
    alias: {
    '@': path.resolve(__dirname, "src"),
    }
}
Copy the code

After resolving the path using the above rules, resolver will check whether the path points to a file or folder

(1) The path is a file: If the file has an extension, you can directly load the file. The resolve. Extensions option is used as the file extension if there is no extension.

(2) The path is folder:

  • If you havepackage.jsonFile, node_modules in the current directory, can’t find it, continue to look up to the root directory. After finding basisresolve.exportsFieldsThe fields specified in the configuration options are searched in sequence, with the usual main or Module fields finding the module entry file
  • If package.json is not present, it looks for index.js

To make it easier to understand, a common example is to introduce vUE in a project (import vue from ‘vue’). Since Vue supports multiple import methods with different files, These include vue.runtime.common.js, vue.runtime.esm.js, and UMD Vue. js and the typescript-enabled type definition file index.d.ts.

How does Webpack find the required version of vue.js?

According to the resolution rules, the path belongs to the module, go to node_modules in the current directory. The path is a folder that will be loaded according to the configuration (main, module) in package.json.

Our project uses Webpack to package each module. If not specified, Webpack preferentially selects ES module to introduce the package, so the corresponding file of Module will be used.

4. Source verification

Clone the separate enhanced- Resolve library and create a js file in the root directory with the following contents:

Executing this code results in:

Conclusion: Enhanced – Resolve resolves different module specifications and import paths to the absolute path of the file.

Through this article I believe you will have a deeper understanding of the Webpack module parsing, thank you for your support