在webpack工程中引用路径@的含义

最新推荐文章于 2023-02-17 10:47:02 发布
最新推荐文章于 2023-02-17 10:47:02 发布
阅读量3.9k 收藏
点赞数
分类专栏： javascript

看webpack配置 build文件夹里的webpack.base.conf.js里面的resolve里面的alias

在引用文件模块的时候后要加上文件的路径：/…/…/xxx.js表示绝对路径、./xxx.js表示相对路径(同一文件夹下的xxx.js)，../表示上一级目录。

如果既不加/…/、../又不加./的话，则该模块要么是核心模块，要么是从一个node_modules文件夹加载。

xiaoniuxqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs和webpack中获取路径原理分析
enternal07的专栏
07-12 659
__dirname 总是指向被执行 js 文件的绝对路径 ./ 指向的是工作路径，就是执行node命令的路径 process.cwd()。也是获取执行node命令的路径 持续更新
前端工程化 webpack
qq_43420617的博客
03-26 1488
webpack webpack 是前端项目工程化的具体解决方案 主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能 npm init -y npm install jquery -S 安装webpack npm install webpack webpack-cli -D -S --save -D --save-dev 通过npmjs.com查看安装时选择-S还是-D index.js 配置基础语句 以隔行变色为例 // es6导入语法 impo
webpack (十一) -路径别名——@符设置src下文件的绝对路径 & 文件后缀——省略.vue等文件后缀，页面同样生效
weixin_44867717的博客
02-22 2391
19-webpack-路径别名——@符设置src下文件的绝对路径 基于webpack，可以使用@符设置src下文件的绝对路径 入口文件index.js修改 vue文件的 绝对路径 第一步：webpack.config.js中进行加载器配置 //解析路径 resolve: { //别名 alias: { //resolve 获取绝对路径的API，join...
webpack学习路径(01.webpack的配置及使用)
weixin_45805459的博客
08-21 249
对于webpack，我的理解是一种工具提供了友好的前端模块化开发的支持，可以解决代码压缩混淆，浏览器兼容性问题，以及提升性能等主要功能， 安装配置过程： 首先创建一个根目录（随便创建一个文件夹），然后在根目录中运行终端cmd，然后在cmd中输入npm init -y，完成后会在根目录生成一个package.json文件, 然后为了规范我们要在创建一个src文件用于放置代码，之后我们就可以在src中进行编程,此时当我们需要使用其他的库的时候我们可以使用npm直接安装，安装命令 npm i ... -S或np
[webpack] 路径中的@符号表示什么
weixin_36210698的博客
11-21 4502
路径中的@符号表示什么 在看别人使用webpack打包的项目代码时，经常会看到在路径中引用@符号，如下所示： import conOne from '@/views/conOne.vue' 这其实利用了webpack的resolve.alias特性，webpack.config.js的配制代码如下，在webpack打包时，会把路径引用中的@符号，转换为相对应的路径。 const path = ...
react webpack配置组件路径引用 @与自定义
Z_Wonderful的博客
11-22 1736
暴露配置文件： create-react-app 生成的项目看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令 npm run eject 修改配置文件： webpack.config.js //把一个路径或路径片段的序列解析为一个绝对路径 path.resolve(__dirname, '../') // 静态储存当前目录绝对路径 __dirname：目录名 const staticRootDir = path.resolve(__dirname, '../'); reso
深入理解Webpack 中路径的配置
08-30
在 Webpack 中，路径配置是非常重要的一部分，直接影响着项目的构建和输出。下面，我们将深入了解 Webpack 中路径配置的相关知识点。 一、 Context Context 是 webpack 编译时的基础目录，入口起点（entry）会相...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
在默认情况下，webpack会将使用到的图片拷贝一份放到output的path指定的目录下，但是在build.js中引用的图片路径却是整个工程文件的根目录。这导致了图片文件找不到的错误。 3. 解决方案 要解决这个问题，我们可以...
Webpack 中 css import 使用 alias 相对路径的方法
01-19
在用 Webpack 处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源。 在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src ...
脚手架vue-cli工程webpack的作用和特点
12-09
Webpack 是一个强大的模块打包工具，尤其在 Vue.js 开发中起着至关重要的作用。Vue CLI，全称为 Vue.js Command Line Interface，是 Vue 的官方脚手架，它预先配置了 Webpack，使得开发者能够快速地搭建 Vue 项目。...
Webpack小技巧-公共组件引用路径简化
weixin_34074740的博客
06-14 267
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件，供不同地方使用，但是随着项目不断变大，项目目录不断变深，我们引用公共组件的路径越来越长！ 例如：引用一个公共模块 import Menu from '../../../../../components/Menu'; // 这里路径太深，很容易写错 我们该怎么优化尼？ 解...
Webpack中@的原理和用法
m0_63400611的博客
05-08 1674
在 webpack 中,可以在 webpack.config.js 文件中配置如下命令,使 @ 在代码中表示指定的路径 module.exports = { resolve: { alias: { //在 webpack 中设置代码中 @ 符号表示 src 这一层目录 '@': path.join(__dirname, './src/') } } } 之后在文件中使用的示例: import msg from '@/msg' //建议使用 @ 表示src源代码目录 从
配置webpack设置根目录
duansamve的博客
02-01 3872
webpack.config.js中resolve配置项添加alias： resolve: { extensions: [".js", ".jsx", ".json"], alias: { "@": path.join(__dirname, "./src") // 这样@符号就表示项目根目录中src这一层路径 } ...
webpack基本配置
hakey_new的博客
02-17 651
webpack基本配置使用
Webpack—配置路径别名
热门推荐
生如夏花 炫至茶靡
04-14 1万+
模块化开发项目中，比如vue和react等，经常需要import不同的js或者css模块到当前目录，那么如果路径比较深的话使用相对路径就比较麻烦，而且在文件迁移的时候，如果在不同的目录下边，又得改变以下引入的路径。所以我们可以使用webpack配置路径别名，在引入的时候我们直接使用这个别名，就可以正确的指向。 我的项目目录如下： 在webpack.config.dev中的resolve下的alia
windows cat命令_玩转Jupyter Notebook3-(“魔法”命令篇)
weixin_40005887的博客
11-18 766
本文梳理Jupyter Notebook中“Magics”命令。 本文速览1、魔法命令介绍 %lsmagic：列出所有magics命令 ​ %quickref：输出所有魔法指令的简单版帮助文档 %Magics_Name?：输出某个魔法命令详细帮助文档 2、Line magics：Line魔法指令 %alias：设置指令的别名 %conda：cell中安装package %...
vuejs webpack模板里import路径中@符号是什么意思以及不能自动刷新解决方法
有问题可关注公众号：前端研究院 后台输入问题回复
04-25 1万+
问：用vuejs的webpack模板生成的项目中，router/index.js里面有一句：import Hello from '@/components/Hello'这里路径前面的“@”符号表示什么意思？回答没事儿就去看看vue模板的代码，里面都有，这是webpack的路径别名，相关定义在这里：resolve: { // 自动补全的扩展名 extensions: ['.js', ...
Webpack中的路径
05-09 736
webpack中涉及许多路径参数的配置。在此做个整理。 context context是webpack编译时的基础目录，entry入口会相对于此目录查找。 若不配置，默认值是当前目录，webpack设置context、默认值代码： this.set("context", process.cwd()); 即webpack运行所在目录。 context应该是绝对路径，假设入口是s...
Webpack
tooby的专栏
09-04 285
阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的...
webpack配置@路径
最新发布
04-20
在webpack的配置文件中，@路径代表的是项目根路径，它可以用于方便地引用项目中的其他文件或目录。例如，如果您想引用项目中的src目录下的某个文件，可以使用@/src/file 的形式进行引用。在配置文件中使用@路径时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值