webpack配置alias设置根目录

最新推荐文章于 2024-09-01 07:39:13 发布

程序员徐小白

最新推荐文章于 2024-09-01 07:39:13 发布

阅读量1.5k

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/weixin_45865724/article/details/104326843

版权

本文介绍了如何在webpack配置中设置alias，以便在引用src目录时使用@作为快捷方式，避免文件移动时需要频繁更新路径的问题。

摘要由CSDN通过智能技术生成

1.增加alias属性

在webpack.config.js文件中

const path=require('path')
module.exports={
   
	   resolve:{
   
	   //给src取别名
        alias:{
   
            '@':path.join(__dirname

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序员徐小白

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

css import 使用 webpack 配置的alias 相对路径

m0_37922914的博客

05-15

879

问题背景 webpack中定义alias相信很多人都知道，在引入文件的时候比较方便不需要写冗长的引用地址，在webpack里定义这个： resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } 则引入文件时 @ 则表示src目录然后在使用import导入css文件时，使用alias`定义的地址简写却出现问题 * -!../../../node_modules/css-loader/dist/

webpack.config.js配置别名(alias)

Rain_Ze的博客

04-29

6211

文章目录前言一、首先webpack.config.js是什么？二、别名（alias）的使用总结文献来源前言想到在webpack配置别名是因为最近引入图片样式太繁琐想更简便些，节省代码提示：以下是本篇文章正文内容，下面案例可供参考一、首先webpack.config.js是什么？示例：webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。二、别名（alias）的使用代码如下（示例）： const path = require('path'); //引入pa

参与评论您还未登录，请先登录后发表或查看评论

babel-plugin-webpack-alias 使用教程

gitblog_00769的博客

09-01

629

babel-plugin-webpack-alias 使用教程 babel-plugin-webpack-aliasbabel 6 plugin which allows to use webpack resolve options项目地址:https://gitcode.com/gh_mirrors/ba/babel-plugin-webpack-alias 项目介绍 babel-plugin...

webpack配置别名alias

weixin_30436891的博客

01-17

677

在webpack.config.js中，通过设置resolve属性可以配置查找“commonJS／AMD模块”的基路径，也可以设置搜索的模块后缀名，还可以设置别名alias。设置别名可以让后续引用的地方减少路径的复杂度。一、常规webpack构建的项目 1、目录结构 - src - utils - utils.js - config - ...

webpack-------路径优化alias

小李科技

06-03

252

webpack配置

Webpack解析别名

听海边涛声

07-22

294

Webpack解析别名

Webpack 中 css import 使用 alias 相对路径的方法

01-19

在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名； ..., resolve: { ..., alias: { '@': resolve('src') } } 这样我们就可以在 js ...

让IDE识别webpack的别名alias的实现方法

10-15

在这个配置中，`"paths"` 字段定义了别名映射，`"baseUrl"` 指定了根目录。`"include"` 和 `"exclude"` 分别指定了需要包含和排除的文件或目录。对于JetBrains家族的IDE，操作则更为简单。只需在项目设置的Webpack...

webpack基本配置

03-08

6. ** resolve（解析）**：设置模块如何被解析，包括别名（alias）、模块根目录（root）和模块解析顺序（modules）等，简化模块引用。 7. **devServer（开发服务器）**：提供一个本地开发服务器，支持热更新和自动...

vue3 webpack 将@指向根目录

热门推荐

flym_的博客

11-23

1万+

作用:设置别名是为了让后续引用的地方减少路径的复杂度 vue-cli2.0 在\build\webpack.base.conf.js文件下设置 //例如 src - components - a.vue - router - home - index.vue index.vue 里，正常引用 A 组件： import A from '../../component...

webpack中alias的配置

LIS606的博客

08-05

1596

对alias配置的目的是为了减少后续引用路径的复杂性。配置的方式为： // 在vue.config.js文件中 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: { // provide the app's title in webpack's name field, so t

webpack小记——alias与eslint

weixin_34195364的博客

04-29

3105

在webpack项目之中，我们会借助alias别名提升代码效率和打包效率。但是在使用了自定义的路径指向后，eslint就会对应产生找不到模块的报错。 Unable to resolve path to module '@/component' import/no-unresolved 复制代码这个时候，就要使用npm包eslint-import-resolver-alias来解决了 cnpm ...

vue项目使用webpack 配置别名alias

@必意玲

12-25

3133

当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。有的人喜欢alias 指向src目录下，也可以设置搜索的模块后缀名，再使用相对路径找文件。设置别名可以让后续引用的地方减少路径的复杂度。 vue-cli 3.0 在vue.config.js下配置别名alias 1. 项目目录结构 - src - utils - index.js - ...

前端笔记-webpack中设置alias，方便import【vue cli】

IT1995的博客

10-01

5616

使用vue cli搞前端项目的使用，可以使用alias设置别名，方便import。如下：从这里可以看到，在alias中配置别名即可！调用如下：如果不设置别名，会出现如下的问题：这里要记住：要导入2个install npm install stylus --save npm install stylus-loader --save ...