这篇具有很好参考价值的文章主要介绍了react17中配置webpack：使用@代表src目录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。
在vue的项目中可以使用@表示src目录，使用该符号表示绝对路径，那么在react中想要使用@怎么办呢？
在react中使用@表示src目录是需要在webpack中配置的，在核心模块node_modules-》react-scripts-》config-》webpack.config.js中搜索找到alias别名，在他的配置项中添加如下一项：
alias:{
'@':path.resolve('src')
}
文章来源：https://www.toymoban.com/news/detail-849443.html
文章来源地址https://www.toymoban.com/news/detail-849443.html
到了这里，关于react17中配置webpack：使用@代表src目录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！
在 Vue 项目当中，可以使用 @ 来表示 src/ ，但在 React 项目中，默认却没有该功能，因此需要进行手动的配置来实现该功能。 别名主要解决的问题：每个页面都使用路径的方式进行引入，这样很麻烦，效率很低，这个时候可以配置一个别名，来直接使用别名引入。 使用
之前写过类似的文章，这次看到一本新书里也介绍了这个知识点，故尝试之。 Refer: 《Learn React With TypeScript - A Beginner\\\'s Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack 1.先建立一个空的文件夹，my-app，并用vscode打开然后到根目录底下创建packa
React 项目开发中可能会使用到 Less 、 Sass 等样式预处理器， create-react-app 创建的 React 项目，默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。 由于需要暴露隐藏的配置文件，不利于项目升级，不推荐使用。 安装 less 与 less-loader 暴露 webpack 配置文件。（提示
学习内容来源：React + React Hook + TS 最佳实践-慕课网 相对原教程，我在学习开始时（2023.03）采用的是当前最新版本： 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p
学习内容来源：React + React Hook + TS 最佳实践-慕课网 相对原教程，我在学习开始时（2023.03）采用的是当前最新版本： 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p
中文官网: https://www.webpackjs.com/ 文档更新稍有不及时 英文官网: https://webpack.js.org/ 项目初始化 安装webpack 使用webpack 命令 使用config配置文件 注：建议使用项目依赖安装而非全局安装，不同项目依赖的版本不相同 Mode 模式 通过选择 development 或 production 之中的一个，来设置 mod
我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录，然后直接上线看就可以看到，不用配置其他项。 但是，如果服务器有多个项目的话，我们就需要将代码部署到服务器根目录里边的子目录了，而放到子目录的话，
yarn list --pattern webpack npm ls --pattern webpack
在前面的章节中我们学习了 webpack 的基础配置（五大核心属性），以及一些高级优化配置（ source map、Tree Shaking、 HMR、Code Split 等），并且分别开发了 webpack.dev.js (开发环境配置)，和 webpack.prod.js (生产环境配置)。 这一章节我们将两个配置合并为一个整体配置，内部差异通过
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如 create-react-app 。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？这边文章将介绍如何使用 webpack 5 来搭建 react 项目，项目地址在文末。 1.1 Webpack 的好处 试想在不使用任何打
