webstorm对webpack中resolve进行智能提示

最新推荐文章于 2023-07-07 14:49:12 发布
原创 最新推荐文章于 2023-07-07 14:49:12 发布 · 5.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webstorm #webpack #webpack别名 #resolve #智能提示

本文介绍如何在WebStorm中配置Webpack配置文件，以便IDE能够识别通过Webpack alias配置的本地库路径，提供更好的代码补全和错误提示功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们会经常用一些本地的库，然后在webpack中利用resolve中的alias给指定库路径起别名，这样在项目中就可以像引用node_modules里的库一样引用它，当然默认webstorm会对引用node_modules里的库有提示作用，而对resolve是没有提示作用的，此时我们需要再webstorm中配置webpack的配置文件，这样便可识别。最好下载webstorm EAP版本，对webpack的配置文件有更好的支持。
在windows系统中：File | Settings | Languages and Frameworks | JavaScript | Webpack，在macOS中：WebStorm | Preferences | Languages and Frameworks | JavaScript | Webpack，配置指定的webpack配置文件。
其实本文只是一个引导作用，主要介绍如下：

https://www.jetbrains.com/help/webstorm/webpack.html
https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/

前端领域Webpack的打包过程中的错误排查
AI架构全栈开发实战笔记
04-09 840
本文旨在为前端开发者提供一套完整的Webpack打包错误排查方法论。Webpack核心工作机制解析常见打包错误分类体系模块解析失败的根本原因Loader和Plugin配置陷阱性能瓶颈识别与优化高级调试技巧和工具链第2章解析Webpack核心概念，建立理论基础第3章详细拆解打包流程中的关键算法第4章提供数学模型帮助理解模块解析机制第5章通过实际案例演示错误排查过程第6-7章提供实用工具和资源推荐第8章展望未来发展趋势Entry。
webstorm搭建vue环境以及通过webpack模板搭建项目流程
08-19
webstorm搭建vue环境以及通过webpack模板搭建项目流程
安装 webpack提示以下代码
布丁的博客
02-06 269
安装 webpack提示以下代码 Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init and try again. 使用sudo npm install -g @vue/cli-init 即可
VSCode 对 Webpack 配置 resolve alias 的路径智能提示
Sparkler123的博客
02-29 1199
项目根目录下创建：jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "@hoc/*": ["src/hoc/*"] } }, "exclude": ["node_modules", "dist"] }
WebStorm笔记-配置js的webpack识别alias（别名）
IT1995的博客
05-22 2471
File->Settings 下面的Languages&Frameworks，将下面的Webpack配置为webpack.base.conf.js 这个文件中配置了JS的别名： 这样敲代码WebStorm就有提示了。
Webstorm--解决：Cannot resolve directory ‘~@‘
IT利刃出鞘的博客
08-25 1649
本文介绍Webstorm的报错：Cannot resolve directory '~@'。
WebStorm、WebPack、ES6、React、JSX
我爱苏小北
07-19 1436
花了很多时间，真的是弄的自己很懵，趁现在整理一下，方便以后查看，也分享给跟我一样懵的人。很多内容是我个人的理解，可能讲究起来有些描述不是很准确，但是我这样的初学者，得先大概了解了、会用了再去深究深层次的东西。 webstorm 首先是一个工具，给我们写代码的，可以直接新建一个project，然后新建文件html、css、js等文件，然后写代码，然后运行。 运行html、css、js程...
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
完成上述步骤后，IDE应该能够识别Webpack别名，并在代码提示和跳转等智能功能中正常使用。如果问题仍然存在，可能需要检查`vue.config.js`文件中是否正确设置了Webpack别名，例如： ```javascript module.exports =...
webstorm中使用node内置模块path.resolve()方法获取绝对路径错误——分析及解决方案
weixin_44093239的博客
05-10 1270
问题已解决，更新自：2019年5月9日 问题描述： 在使用webstorm测试node的path内置模块时，在JS模块中调用path.resolve()方法，无法获得该JS模块的绝对路径（不含模块名称：也就是模块所在文件夹的绝对路径）【下同】。 问题现象及分析解决步骤： 第一步： 将pathTest文件夹作为项目用webstorm打开，如下图： 第二步： 用webstorm快捷键Ctrl+shi...
让IDE识别webpack的别名alias的实现方法
10-15
别名可以极大地提高开发效率，但有时IDE（集成开发环境）可能无法识别这些自定义的路径，导致无法提供智能提示、路径补全等功能。本文将详细介绍如何使IDE理解并识别Webpack的别名设置。 首先，Webpack 的别名...
webstorm没有node语法提示
明天最后的博客
09-22 545
如图在webpack的js中文件出现一些nodejs的一些变量，语法下出现烦人的波浪线，并提示变量或函数不存在 解决方法： 在preferences->languages&frameworks->Node.js and Npm中勾选COding assistance for Node.js，然后应用保存就可以了 ...
WebPack+WebStorm调试
weixin_30892037的博客
07-17 541
怎么用webstorm来调试WebPack？ 今天查了很多文档，最终在官网上耐心看完英文文档后，才解决。附上链接：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 工具简介 Windows7 WebStorm2017 Webpack2 谷歌浏览器（默认浏览器） ...
webstorm加载webpack
ch_atu的博客
08-13 424
如果不行先设置为Disables再设置回Automatically。
关于使用webStrom工具做webpack打包的问题
扬帆天涯
11-12 1188
{ "name": "meetwebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": {
webstorm+webpack创建项目
热门推荐
风火一回，一生不毁
05-05 2万+
1.使用webstrom创建一个空的项目 2.在项目下创建文件夹和文件 a.创建css文件夹存放index.css文件，文件内容如下：   p{ font-size: 24px; padding:0 100px; color:blue; } p:nth-of-type(2) { font-size: 30px; text-align: cent...
WebStorm下搭建webpack+vue开发环境
hins
06-01 6801
工具安装 首先安装一些必要的工具，由于npm的源都是在国外的地址，所以安装会比较慢，可以使用淘宝的国内镜像地址。 1、安装淘宝镜像的命令为： npm install -g cnpm --registry=https://registry.npm.taobao.org 2、然后安装全局vue-cli脚手架，用于帮助搭建所需的Vue的开发模板框架。命令如下： cnpm install ...
vue项目在webstorm中将某文件设置成根目录后，webpack配置方法
BoReFrontEnd的博客
08-28 2120
第一步：右击common -> Mark Directory as -> Resource Root 第二步：查看common 文件是否是紫色，是紫色说明设置成功 第三步：build文件下的webpack.base.conf.js 中 resolve 对象修改为如下代码 resolve: { extensions: ['.js', '.vue', '.json...
前端构建（NPM/GIT/WebStorm/cnpm/yarn/本地调试/webpack loader编写/Webpack插件）
saoraozhe3hao的专栏
10-28 1144
安装 npm-cli 安装nodejs时，会默认装上npm，即生成一个命令脚本npm.cmd，放在nodejs安装根目录中（系统环境变量中有该路径），该脚本中的语句就是用nodejs去执行一个js文件npm-cli.js npm 配置 npm config list 查看npm配置，包括代理proxy，全局安装目录prefix，配置文件位于~/.npmrc npm confi.........
Webstorm+Nodejs+webpack+vue-cli+Git搭建vue环境
无
07-07 2626
此笔记归纳整理webstorm搭建vue项目，仅作记录使用。
webpack配置@/没有提示文件路径
最新发布
03-26
嗯，用户遇到了Webpack配置中@别名路径提示的问题，需要解决。首先，我得回忆一下Webpack的配置部分。通常，在Webpack里设置别名是通过resolve.alias来做的，比如设置'@'指向'src'目录。但配置正确后，IDE可能还是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值