wepack alias 配置以及 Can't resolve 错误解决
2019-09-04
JavaScript
6705
alias 别名,wepack 中alias用来给指定路径设置一个别名,方便路径书写。同时,缓存路径也能提高编译速度。
wepakc alias 配置如下:
resolve: {
alias: {
'@Containers': path.resolve(__dirname, './src/client/Containers'),
'@Components': path.resolve(__dirname, './src/client/Components')
}
}
使用方法:
// 原始写法,需要使用相对路径
// import List from './Comtanners/List'
// 现在使用 alias 代替相对路径
import List from '@Containers/List'
如此配置会出现一个错误,Can't resolve '@Containers/list'
再查了一下,这里是没有写后缀名导致的,在没有后缀名的情况下,wepack 默认查找 ['.wasm', '.mjs', '.js', '.json']
这些后缀,我是.jsx
结尾,自然是找不到的,
这里需要将要自动解析的文件后缀写入 resolve.extensions
属性中。
resolve: {
extensions: ['.json', '.js', '.jsx']
alias: {
'@Containers': path.resolve(__dirname, './src/client/Containers'),
'@Components': path.resolve(__dirname, './src/client/Components')
}
}
如果是vue项目,还需要加个.vue
后缀。
问题解决。
扩展:
wepack resovle 属性设置模块如何被解析
如果路径指向一个文件:
- 如果路径具有文件扩展名,则被直接将文件打包。
- 否则,将使用 [resolve.extensions] 选项作为文件扩展名来解析,此选项告诉 resolver 在解析中能够接受哪些扩展名(例如 .js, .jsx)。
如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:
- 如果文件夹中包含 package.json 文件,则按照顺序查找 resolve.mainFields 配置选项中指定的字段。通过 package.json 中的第一个字段确定文件路径。
- 如果不存在 package.json 文件或者 package.json 文件中的 main 字段没有返回一个有效路径,则按照顺序查找 resolve.mainFiles 配置选项中指定的文件名,看是否能在 import/require 目录下匹配到一个存在的文件名。
- 文件扩展名通过 resolve.extensions 选项,采用类似的方法进行解析