深入浅出Webpack 摘要 Resolve

Resolve

Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块。Resolve 配置 Webpack 如何寻找模块所对应的文件, Webpack 内置 JavaScript模块化语法解析功能,默认会采用模块化标准里约定的规则去寻找,但我们也可以根据自己的需要修改默认的规则。

resolve.alias 配置项通过别名来将原导入路径映射成一个新的导入路径。例如使用以下配置 :

resolve: {
  alias: {
    components : './src/components'
  }
}

当通过 import Button from 'components/button'导入时,实际上被 alias 等 价替换成了 import Button from './src/components/button'

resolve: {
  alias: {
    'react$' : '/path/to/react.min .j s 
  }
}

react$只会命中以 react 结尾的导入语句,即只会将 import 'react' 关键字替换 成 import '/path/to/react .min.js'

mainFields

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


// 第三库的package.json

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

webpakc根据mainFields的配置决定优先采用哪份代码,mainFields默认配置为:['browser', 'main'] 按顺序寻找,使用找到的第一个,所以如果第三方库如上一样配置,就会采用'lib/index.js'

如果想采用'es/index.js' 可以这么配置。

resolve: {
  mainFields: ['jsnext:main','browser', 'main']
}
extensions

在导入语句没带文件后缀时,Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions 用于配置在尝试过程中用到的后缀列表

resolve : {
  extensions: ['.js','.json'],
  enforceExtension: false,  // 配置为true 则必须带文件后缀
  enforceModuleExtension: false 
  // enforceModuleExtension 针对于配置第三方模块的后缀配置
  // 因为大多数第三方模块的引入语句大都没有带后缀 当enforceExtension设置为true的时候
  // 就务必设置enforceModuleExtension 为false
}

也就是说,当遇到 require ('./data')这样的导入语句时, Webpack会先寻找./data.js文件,如果该文件不存在,就去寻找. /data.json文件,如果还是找不到,就报错

如果resolve.enforceExtension被配置为 true,则所有导入语句都必须带文件后缀,例如开启前 import './foo' 能正常工作,开启后就必须写成 import './foo.js'

modules

resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块,默认只会去 node_modules 目录下寻找 。有时我们的项目里会有一些模块被其他模块大量依赖和导入,由于其他模块的位置不定,针对不同的文件都要计算被导入的模块文件的相对路径 ,这个路径有时会很长,就像import '../../../components/button',这时可以利用modules 配置项优化 。假如那些被大量导入的模块都在./src/components 目录下,则将 modules配置成 modules : ['./src/components','node_modules']后,可以简单地通过 import 'button' 导入。

推荐阅读更多精彩内容

  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 741评论 0 1
  • 从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部...
    yzc123446阅读 368评论 0 1
  • 一、优化构建速度 Webpack在启动后会根据Entry配置的入口出发,递归地解析所依赖的文件。这个过程分为搜索文...
    meng_281e阅读 3,623评论 0 9
  • 一、入门loader可以看作是翻译员,配置module.rules数组里的规则,告诉webpack遇到哪些文件使用...
    zx_lau阅读 1,233评论 0 0
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 1,691评论 2 16