webpack Resolve 学习笔记

使用说明

在@vue/cli中配置，在根目录下创建的vue.config.js，以设置alias为例
1、使用chainWebpack配置，如

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

2、使用configureWebpack方法的对象形式配置，如

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

3、使用configureWebpack方法的函数形式配置，如

module.exports = {
    configureWebpack:config=>{
        config.resolve.alias['test2']=resolve('./src/test2')
    }
    
}

或者return一个将要合并的对象

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

上述的3种方法的设置内容会合并到一起

resolve.alias

通过别名来将原导入路径映射成一个新的导入路径。
例子如上
alias 还支持通过$符号来缩小范围到只命中以关键字结尾的导入语句：

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}
import Test1 from 'xyz'; // 精确匹配，所以 path/to/file.js 被解析和导入
import Test2 from 'xyz/file.js'; // 非精确匹配，触发普通解析

补充：

// 导入的路径没有指明什么文件，则默认导入test/index.js
// 如test没有配置路径，则导入的是node_modules/test/index.js
import "test"

resolve.aliasFields

指定一个字段，例如 browser进行解析（不懂）。默认：

aliasFields: ["browser"]

resolve.cacheWithContext

这解决了性能衰退的问题

resolve.descriptionFiles

配置描述第三方模块的文件名称，也就是 package.json文件
默认如下：

descriptionFiles: ["package.json"]

resolve.enforceExtension

如果被配置为 true，则所有导入语句都必须带文件后缀，例如开启前 import "./test"能正常工作，开启后就必须写成import "./test.js"
默认：

enforceExtension: false

resolve.enforceModuleExtension

enforceModuleExtension 和 enforceExtens工on 的作用类似。但只只对 node modules 下的模块生效。
enforceExtension:true 时，因为安装的第三方模块中大 多数导入语句都没带文件的后缀，所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。
默认：

enforceModuleExtension: false

resolve.extensions

配置在尝试过程中用到的后缀列表，
默认是：

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

如import "./test"，webpack会先去找"./test.js"文件，找不到就找"./test.json"，还是找不到就报错

resolve.mainFields

有一些第三方模块会针对不同的环境提供几份代码。如分别提供采用了 ES5和ES6的两份代码，这两份代码的位置写在 package.json 文件里

{
    "jsnext:main":"es/index.js",//采用ES6语法的代码入口文件
    "main":"lib/index.js" //采用 ES5 语法的代码入口文件
}

webpack配置中指定的target不同，默认值也会有所不同。当 target 属性设置为 webworker, web 或者没有指定，默认值为：

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

对于其他任意的 target（包括 node），默认值为：

mainFields: ["module", "main"]

如想优先采用 ES6 的那份代码，则可以这样配置：

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

resolve.mainFiles

解析目录时要使用的文件名。默认

mainFiles: ["index"]

resolve.modules

告诉 webpack 解析模块时应该搜索的目录。
默认是

modules: ["node_modules"]

如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：

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

resolve.unsafeCache

启用，会主动缓存模块，但并不安全。传递 true 将缓存一切。默认：

unsafeCache: true

正则表达式，或正则表达式数组，可以用于匹配文件路径或只缓存某些模块。例如，只缓存 utilities 模块：

unsafeCache: /src\/utilities/

resolve.plugins

应该使用的额外的解析插件列表。它允许插件，如DirectoryNamedWebpackPlugin

plugins: [
  new DirectoryNamedWebpackPlugin()
]

resolve.symlinks

是否将符号链接(symlink)解析到它们的符号链接位置(symlink location)。（？？？一脸懵逼）默认：

symlinks: true

resolve.cachePredicate

决定请求是否应该被缓存的函数。函数传入一个带有 path 和 request 属性的对象。默认：

cachePredicate: function() { return true }

resolveLoader、

这组选项与上面的 resolve 对象的属性集合相同，但仅用于解析 webpack 的loader包。默认：

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

resolveLoader.moduleExtensions

如果你确实想省略 -loader，也就是说只使用 example，则可以使用此选项来实现：

moduleExtensions: [ '-loader' ]