webpack Resolve learning notes

Instructions for use

Configure the vue Config JS, taking setting alias as an example
1. Use chainWebpack configuration, such as

const path = require("path");
function resolve(dir){
    return path.join(__dirname,dir)
module.exports = {
    chainWebpack: (config) => {
        // set(key,value)

2. Use the object form configuration of the configureWebpack method, such as

module.exports = {
        resolve: {
            alias: {
              'test': resolve('./src/test')

3. Use the function form of configureWebpack method to configure, such as

module.exports = {

Or return an object to be merged

onfigureWebpack: config => {
     return {
            resolve: {
                alias: {
                    'test2': resolve('./src/test2')

The settings of the above three methods will be merged together


An alias is used to map the original import path to a new import path.
Example above
alias also supports narrowing the scope to only hit import statements ending in keywords through the $symbol:

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
import Test1 from 'xyz'; // Exact match, so path/to/file JS is parsed and imported
import Test2 from 'xyz/file.js'; // Inexact matching, triggering common parsing


// If the imported path does not specify any files, test/index JS
// If test does not have a path configured, the node is imported_ Modules/test/index JS
import "test"


Specify a field, for example, to be parsed by browser. Default:

aliasFields: ["browser"]


This solves the problem of performance degradation


Configure the file name that describes the third-party module, that is, package JSON file
The default is as follows:

descriptionFiles: ["package.json"]


If it is configured as true, all import statements must have a file suffix. For example, import "./test" can work normally before startup, and it must be written as import "./test.js" after startup

enforceExtension: false


enforceModuleExtension and enforceextents have similar functions. But it is only effective for modules under node modules.
When enforceExtension:true, because most import statements in the installed third-party modules do not have file suffixes, configure enforceModuleExtension:false to be compatible with the third-party modules.

enforceModuleExtension: false


Configure the list of suffixes used in the attempt,
The default is:

extensions: [".js", ".json"]

For example, if you import "./test", the webpack will first look for the "./test.js" file. If it cannot be found, it will look for "./test.json". If it cannot be found, it will report an error


Some third-party modules provide several copies of code for different environments. For example, two copies of ES5 and ES6 codes are provided respectively, and the positions of these two codes are written in package JSON file

    "jsnext:main":"es/index.js",//Code entry file with ES6 syntax
    "main":"lib/index.js" //Code entry file with ES5 syntax

If the target specified in the webpack configuration is different, the default value will be different. When the target attribute is set to webworker, web or not specified, the default value is:

mainFields: ["browser", "module", "main"]

For any other target (including node), the default value is:

mainFields: ["module", "main"]

If you want to preferentially adopt the code of ES6, you can configure it as follows:

mainFields: ["jsnext:main","browser", "main"]


The file name to use when resolving directories. default

mainFiles: ["index"]


Tell webpack the directory that should be searched when parsing the module.
Default is

modules: ["node_modules"]

If you want to add a directory to the module search directory, this directory takes precedence over node_modules/ search:

modules: [path.resolve(__dirname, "src"), "node_modules"]


When enabled, the module is actively cached, but it is not secure. Passing true caches everything. Default:

unsafeCache: true

Regular expressions, or arrays of regular expressions, can be used to match file paths or cache only certain modules. For example, cache only the utilities module:

unsafeCache: /src\/utilities/


List of additional parsing plug-ins that should be used. It allows plug-ins such as DirectoryNamedWebpackPlugin

plugins: [
  new DirectoryNamedWebpackPlugin()


Whether to resolve symlinks to their symlink location. (?????????????????????????????????????????) default:

symlinks: true


A function that determines whether the request should be cached. The function passes in an object with the path and request attributes. Default:

cachePredicate: function() { return true }


This set of options is the same as the attribute set of the resolve object above, but is only used to parse the loader package of the webpack. Default:

  modules: [ 'node_modules' ],
  extensions: [ '.js', '.json' ],
  mainFields: [ 'loader', 'main' ]


If you really want to omit -loader, that is, only use example, you can use this option to implement:

moduleExtensions: [ '-loader' ]

Tags: Javascript Front-end

Posted by jgires on Tue, 31 May 2022 02:06:37 +0530