大家好!我是萝卜,上篇介绍了与 entry 和 output 相关的配置,这一篇将介绍 Webpack 其他重要配置。
resolve
Webpack 进行构建的时候会从入口文件(entry)开始遍历寻找各个模块的依赖,resolve 配置是帮助 Webpack 查找依赖模块的,通过 resolve 的配置,可以帮助 Webpack 快速查找依赖,也可以替换对应的依赖(比如开发环境用 dev 版本的 lib 等)。下面来介绍下常用的 resolve 配置。
1.resolve.extensions
resolve.extensions是帮助 Webpack 解析扩展名的配置,默认值:['.wasm', '.mjs', '.js', '.json'],所以我们引入 js 和 json 文件,可以不写它们的扩展名,通常我们可以加上 .css、.less等,但是要确保同一个目录下面没有重名的 css 或者 js 文件,如果存在的话,还是把路径写全吧。
module.exports = {
resolve: {
extensions: [‘.js’, ‘.json’, ‘.css’]
}
}
2. resolve.alias
resolve.alias 是最常用的配置,通过设置 alias 可以帮助 webpack 更快查找模块依赖,而且也能使我们编写代码更加方便。例如,我们在实际开发中经常会把源码都放到src文件夹,目录结构如下:
src
├── lib
│ └── utils.js
└── pages
└── demo
└── index.js
在 src/pages/demo/index.js 中如果要引用 src/lib/utils.js 那么可以通过:import utils from '../../lib/utils' ,如果目录更深一些,会越来越难看,这时可以通过设置 alias 来缩短这种写法,例如:
module.exports = {
resolve: {
src: path.resolve(__dirname, ‘src’),
‘@lib’: path.resolve(__dirname, ‘src/lib’)
}
}
经过设置了 alias,我们可以在任意文件中,不用理会目录结构,直接使用 require('@lib/utils')或者 require('src/lib/utils') 来帮助 Webpack 定位模块。
Tips:alias 的名字可以使用 @ ! ~等这些特殊字符,实际使用中 alias 都使用一种,或者不同类型使用一种,这样可以跟正常的模块引入区分开,增加辨识度。
3. resolve.mainFields
有一些我们用到的模块会针对不同宿主环境提供几份代码,例如提供 ES5 和 ES6