wepack alias 配置以及 Can't resolve 错误解决

2019-09-04

JavaScript

6683

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

« 如何编写简单爬虫