1. webpack 如何配置@ 为 src根目录
在 Webpack 中配置 @ 作为指向 src 根目录的别名，通常需要修改 Webpack 的配置文件（通常是 webpack.config.js），并根据项目是否使用 TypeScript 来调整相应的配置。以下是具体的步骤：
1.1. 对于 Webpack 配置
1. 安装必要的依赖
确保你已经安装了path模块，它属于 Node.js 的核心模块之一，因此不需要额外安装。2. 修改 Webpack 配置文件
打开或创建你的webpack.config.js文件，并添加如下内容：
const path = require('path');
module.exports = {
// 其他配置...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 假设 src 目录与 webpack.config.js 在同一级目录下
}
}
};如果 src 目录不在同一级目录下，你需要相应地调整路径，比如 '../src' 或其他相对路径。
1.2. 对于 TypeScript 项目
如果你的项目是用 TypeScript 编写的，还需要修改 tsconfig.json 文件来让 TypeScript 编译器识别这个别名：
1. 编辑 tsconfig.json
{
"compilerOptions":{
// 其他选项...
"baseUrl":".",// 这里表示基础路径是项目根目录
"paths":{
"@/*":["./src/*"]// 将 @ 映射到 ./src 目录
}
},
// 其他配置...
}1.3. 应用更改
完成上述配置后，请确保重启 Webpack 开发服务器或者重新构建项目以使更改生效。
1.4. 注意事项
• 如果你使用的是 Create React App (CRA) 创建的 React 项目，直接修改 Webpack 配置并不容易，因为 CRA 将 Webpack 配置隐藏起来了。在这种情况下，你可以通过 react-app-rewired和customize-cra插件来覆盖默认的 Webpack 配置。• 如果你的项目结构复杂或者有多个入口点，可能需要对每个入口点分别设置别名，或者确保别名设置适用于所有入口点。 • 当你在代码中引用 @路径时，确保路径是相对于src目录的，例如import Component from '@/components/MyComponent';。
