Resolve
該配置項(xiàng)用來(lái)解決依賴module查找的愕掏。webpack提供了默認(rèn)參數(shù)益老,
可以對(duì)默認(rèn)參數(shù)進(jìn)行更改來(lái)處理相關(guān)依賴是尔。
可以查看Module Resolution了解resolver的查找規(guī)則峻汉。
Resolve(object)
配置依賴的modules被解決的方式烙样。比如冯遂,當(dāng)基于ES2015語(yǔ)法調(diào)用import "lodash"
,
resolve
配置可以改變webpack查找lodash
的路徑谒获。
resolve.alias(object)
創(chuàng)建alias
可以使導(dǎo)入模塊更方便蛤肌。比如壁却,映射通用文件夾src
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
使用相對(duì)路徑的方式導(dǎo)入依賴
import Utility from '../../utilities/utility';
使用alias
的方式導(dǎo)入依賴
import Utility from 'Utilities/utility';
使用$
符號(hào)可以定位到具體的js文件
alias: {
xyz$: path.resolve(__dirname, 'path/to/file.js')
}
配置過(guò)定位文件后可以按照如下示例使用
import Test1 from 'xyz'; // Success, file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Error, /path/to/file.js/file.js is invalid
alias: | import "xyz" | import "xyz/file.js" |
---|---|---|
{} | /abc/node_modules/xyz/index.js | /abc/node_modules/xyz/index.js |
- | - | - |
- | - | - |
- | - | - |
- | - | - |
- | - | - |