我想在webpack中实现一些别名。我想做的是,而不是使用它从文件夹components中导入App.js中的组件。
./components/layout/Header/Header
我想要这个:
@components/layout/Header/Header
也就是说,为了避免将来创建嵌套文件夹时出现问题。我所做的是在webpack.config.js上进行编码
module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
alias: {
src: path.resolve(__dirname, 'src'),
assets: path.resolve(__dirname, 'src/assets'),
components: path.resolve(__dirname, 'src/components'),
}
}
.
.
.
};
这个在tsconfig.json文件:
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": ".",
"paths": {
"@": ["./src/*"],
"@assets": ["./src/assets/*"],
"@components": ["./src/components/*"]
},
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
},
"include": [
"src"
]
}
当我运行"npm run start"这是一个"react-scripts start",我得到以下错误:
./src/App.js
Module not found: Can't resolve '@components/layout/Header/Header' in 'C:UsersAngelDocumentsReactthermometersrc'
另外,我注意到当我运行"npm run "时,对象"路径"我在tsconfig上创建的。删除,文件重置为。. 我是新的创建反应项目从零开始。提前感谢!
查看Webpack的文档,它没有提到自动在别名前加上@
。由于没有在那里指定,Webpack(因此react-scripts start
)不知道@components
指向什么。
我实际上不知道Webpack是否支持以@
开头的别名(例如,$
的后缀对Webpack有特定的含义,而@
通常用于限定作用域的包),但如果是这样,你必须修改你的resolve.alias
以包括@
。
没有从webpack到别名的前缀,您需要更新您的别名以使用与jsconfig/tsconfig相同的路径密钥。
module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
alias: {
'@src': path.resolve(__dirname, 'src'),
'@assets': path.resolve(__dirname, 'src/assets'),
'@components': path.resolve(__dirname, 'src/components'),
}
}
.
.
.
};