在Webpack配置文件中使用babel-plugin-module-resolver插件来解析路径别名。示例代码:
在Webpack配置文件中引入插件:
const path = require('path');
const { babelLoader } = require('./util/loaders');
const ModuleResolverPlugin = require('babel-plugin-module-resolver');
module.exports = {
// ...
module: {
rules: [babelLoader],
},
plugins: [
new ModuleResolverPlugin({
alias: {
'@': path.resolve(__dirname, 'src'),
},
}),
],
};
该配置定义了一个名为 @ 的路径别名,它指向项目根目录下的 src 文件夹。
然后在babel选项中添加配置,使babel与该解析器配合使用:
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/preset-react"
],
"plugins": [
[
"babel-plugin-module-resolver",
{
"alias": {
"@": "./src"
}
}
]
]
}
这个配置指定了 babel-plugin-module-resolver 插件的别名配置,它告诉 Babel 将所有路径中的 @ 都替换为 src,这样就可以成功解析路径别名了。