乐趣区

webpack-Resolve-学习笔记

jiezi

应用阐明

在 @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']
退出移动版