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 选项,采用类似的方法进行解析