webpack学习笔记--配置resolve

153 阅读1分钟

webpack,启动后,会从入口文件出发,找出所有依赖的模块。

而resolve配置就是webpack寻找模块的规则

resolve可配置项:

alias

resolve.alias配置项通过别名把原导入路径映射成一个新的导入路径。

mainFields

有些第三方模块会针对不同环境提供代码,例如分别采用ES5和ES6的2份代码,这2份代码的位置写在'package.json'文件里,如下:

{

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

"main": "lib/index.js" // 采用 ES5 语法的代码入口文件

}

Webpack 会根据  mainFields  的配置去决定优先采用那份代码,

mainFields  默认如下: mainFields: ['browser', 'main']

假如你想优先采用 ES6 的那份代码,可以这样配置:

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

extensions

导入语句没带文件后缀时,webpack会自动带上后缀去尝试访问文件是否存在。 默认是:extensions:['.js','json'] 当遇到如require('./data')导入语句时,webpack会先去寻找'./data.js'文件,如果该文件不存在就去寻找'./data.json'文件,如果还是找不到就报错

modules

resolve.modules配置webpack去哪些目录下寻找第三方模块,默认是只会去'node_modules'目录下寻找。但如果某个模块导入频繁,这时也可以将此模块所在目录写进modules配置中。

descriptionFiles

resolve.descriptionFiles配置描述第三方模块的文件名称,也就是package.json文件。

默认descriptionFiles:['package.json']

enforceExtension

resolve.enforceExtension若配置为true,则所有导入语句都必须带文件后缀。

enforceModuleExtension

enforceModuleExtension和enforceExtension作用类似,但enforceModuleExtension只对node_modules下的模块生效。enforceModuleExtension通常搭配enforceExtension使用。在 enforceExtension:true时,因为安装的第三方模块中大多数导入语句没带文件后缀,所以这时通过 enforceModuleExtension:false来兼容第三方模块