首页 > 其他分享 >react——webpack配置@路径——配置jsconfig.json提示

react——webpack配置@路径——配置jsconfig.json提示

时间:2022-10-01 21:35:56浏览次数:61  
标签:const webpack customConfig react json addWebpackAlias override path config


利用addWebpackAlias配置路径

const path = require('path')
const { addDecoratorsLegacy, override, addWebpackAlias } = require('customize-cra')
// 追加上一个装饰器
module.exports = override(
addDecoratorsLegacy(),
addWebpackAlias({
'@': path.resolve('src')
}),
customConfig()
)

自定义配置

const path = require('path')
const customConfig = () => config => {
config.resolve.alias['@'] = path.resolve('src')
return config
}


module.exports = override(
addDecoratorsLegacy(),
customConfig(),
// 按需要加载css,无用的css在打包时,不会打包到项目中
fixBabelImports('import', { libraryName: "antd-mobile", style: "css" })
)

配置路径别名这样的话就会短一些

jsconfig.json

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}


标签:const,webpack,customConfig,react,json,addWebpackAlias,override,path,config
From: https://blog.51cto.com/u_15808854/5728445

相关文章

  • hook函数——react——同步获取useState的最新状态值
    简介在React的世界中,有容器组件和UI组件之分,在ReactHooks出现之前,UI组件我们可以使用函数组件,无状态组件来展示UI,而对于容器组件,函数组件就显得无能为力,我们依赖于......
  • 问:React的setState为什么是异步的?
    前言不知道大家有没有过这个疑问,React中setState()为什么是异步的?我一度认为setState()是同步的,知道它是异步的之后很是困惑,甚至期待React能出一个setStateSync()......
  • React面试:谈谈虚拟DOM,Diff算法与Key机制
    1.虚拟dom原生的JSDOM操作非常消耗性能,而React把真实原生JSDOM转换成了JavaScript对象。这就是虚拟Dom(VirtualDom)每次数据更新后,重新计算虚拟Dom,并和上一次生成的虚拟......
  • 【前端必会】走进webpack生命周期,另类的学习方法
    背景webpack构建过程中的hooks都有什么呢?除了在网上看一些文章,还可以通过更直接的办法,结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebp......
  • 如何在 React 中构建一个简单的进度条
    如何在React中构建一个简单的进度条进度条是一个简单但功能强大的UI元素。上周,我为一个无债务计算器项目创建了自己的项目,并意识到我有多么认为它们是理所当然的。当......
  • 将 react-beautiful-dnd 与 Next.js 和 TypeScript 一起使用
    将react-beautiful-dnd与Next.js和TypeScript一起使用Next.js+TS+react-beautiful-dnd介绍反应美丽的dnd是专门为列表(垂直、水平、列表之间的移动、嵌套......
  • 什么是JSON和XML
    什么是JSON和XMLJSON:JavaScriptObjectNotation【JavaScript对象表示法】.XML:extensiablemarkuplanguage被称作可扩展标记语言JSON和XML都是数据交换语言,完全独......
  • webpack 浅谈
    webpack是什么是一个模块化打包工具,分析我们的项目结构,将不同的资源和文件,进行打包,合并在一个文件里。webpack的作用读取文件,解析文件,处理文件,编译文件,打包文件并合并......
  • Newtonsoft.Json 之HtmlEncodeConverter
    ///<summary>///html编码序列化转换器///</summary>publicclassHtmlEncodeConverter:JsonConverter{//是否开启自定义反序列化,值......
  • Vue3 + React18 + TS4 入门到实战
    前端项目开发,基本绕不开Vue+TS或React+TS,因此,这已经成为前端开发工程师日常需掌握的三大热门技术。本课程针对真正的初级前端同学而设,带大家系统地掌握3者目前新版......