webpack如何设置路径别名和省略后缀

最新推荐文章于 2023-10-28 10:06:59 发布
最新推荐文章于 2023-10-28 10:06:59 发布
阅读量727 收藏
点赞数
分类专栏： webpack 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/haosicx/article/details/127057602
版权

需求

  • 每次使用import引入路径的时候都很麻烦
    – 都要…/…/…/这样的 大量的重复操作
  • 我再想可不可以设置一个别名 只要输入import { xxx } from 'appConfig';
    – 就可以直接拿到这个js里面的文件呢 可以方便用于拿一些公共的工具类

解决方案

我发现webpack的配置里有个这个属性resolve下的alias
于是我打算这样去实现这个方法

// 可以首先定义一个获取路径的方法
function resolve(dir) {
   
  return path.join(__dirname, '..'
最低0.47元/天 解锁文章
webpack+vue中使用别名路径引用静态图片地址
08-28
主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack打包文件，在引入其他的文件时，省略文件的后缀名
wzg0817的博客
07-28 1247
文章首发------------ 当我们在使用webpack打包vue，我们需要引入一下文件的时候，会这样写 有时候我们不想写文件的后缀名，可以进行如下配置 resolve: { // 配置 省略文件后缀名 extensions: ['.js', '.css', '.vue'], }, 这样我们就不用写文件的后缀名啦 文章首发------------ ...
webpack配置排除打包
2301_76866366的博客
05-30 2210
webpack配置排除打包,webpack配置排除打包-根据当前环境动态配置,...........
webpack打包，vue、react引用文件省略后缀名
踏步修行
07-22 3215
不管是在react或者是在vue项目中，往往需要在一个文件中引入另外一个文件，不管是以.js或者是以.vue为后缀的文件都可以省略这些后缀名。直接在webpack.config.js配置文件中加以下代码即可。 一般react和vue都是用ES6中的import…from…来引用文件，上面图片中的extensions指定了from后可导入的文件类型。vue中引入组件一般是vue后缀，在上面数组中加...
webpack配置路径快捷方式，文件引用后缀过滤
李知恩李知金
04-18 615
resolve: { alias: { "@": path.join(__dirname,"src"), // 目录快捷方式配置 }, extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],//以上文件引入可以省略后缀名 }
webpack路径的别名配置
苦涩记忆
07-08 2635
如果还不知道webpack的同学，可以先自行去了一些webpack，传送门webpack详细入门整理 我们在使用模块化开发的时候都是使用import或者require去导入我们的模块，但是当我们项目较大，模块较多的时候，我们用相对路径导入是一件麻烦的事情。那有没有一种更简便的方法去匹配路径呢？这时我们可以使用webpack的别名配置功能。 1、在我们的webpack.config.js中： 配置配置我们resolve.alias // 引入nodejs 的path模块，path.resolve用来处理绝对路
webpack5详细配置与介绍
qq_44073682的博客
03-24 2400
webpack的基本概念： 微博pack时一种前端资源构建工具，一个静态模块打包器，再webpack看来，前端的所有资源，都会当作一个模块来处理，它将会根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle) entry:入口指示，以哪个文件为入口七点开始打包，分析构建内部依赖图 output：输出指示，webpack打包后的资源bundles输出到哪里去，还有如何命名 loader：让微博pack可以处理那些非js文件 plugins:做一些功能更加强大的活，插件的范围包括，从打包优化和压缩
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
Vue中使用webpack别名的方法实例详解
08-27
本文详细介绍了Vue中使用webpack别名的方法实例详解，包括webpack别名的概念、在JS和CSS中的应用、正确使用webpack别名的优点、webpack配置文件的重要性、Vue项目中的文件引入问题和webpack对路径的处理。
深入理解Webpack 中路径的配置
08-30
在 Webpack 中，路径配置是非常重要的一部分，直接影响着项目的构建和输出。下面，我们将深入了解 Webpack 中路径配置的相关知识点。 一、 Context Context 是 webpack 编译时的基础目录，入口起点（entry）会相...
Vue中import from的来源及省略后缀与加载文件夹问题
11-21
Vue使用import … from …来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的： module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... } 这里的extensions指定了from后可导入的文件类型。 而上面定义的这3类可导入文件，js和vue是可以省略后缀的： import test from './test.vue' 等同于
vue和webpack打包项目相对路径修改的方法
08-27
本文将详细介绍如何修改Vue和Webpack配置，以便适应这种场景。 首先，我们需要理解Webpack的`publicPath`属性。这个属性指定了输出文件的基础URL，用于处理静态资源的引用路径。默认情况下，Vue CLI生成的项目中，`...
webpack入门5----基础配置详情
DOM曼珠沙华的博客
07-23 386
1.entry 打包入口 有以下三种打包方式：单字符串、数组、对象 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 ...
配置路径别名---React
最新发布
poguanba的博客
10-28 190
2.在项目根目录创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名。1.安装修改webpack的 CRA 配置的包：npm i @craco/craco -D。5.jsconfig.json---使用@可以有提示。3.修改 package.json。
node项目打包如何隐藏html后缀,详解webpack打包nodejs项目(前端代码)
weixin_36229293的博客
06-03 505
随着前端体积越来越大，功能越来越丰富，这时候就需要将前端工程化，而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念入口起点配置组件加载器模块模块热替换适用情况首先说明，此情况不具备普遍性。若你的情况与笔者类似那么希望这篇文章能够帮到你。我的项目情况是这样的：用node.js做后台，ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成...
配置webpack从而在导入组件的时候省略.jsx后缀名
whuhewei的博客
04-20 1422
昨天介绍过在index.js中导入组件Hello的方式：import Hello from "./components/Hello.jsx"。如果我们想在导入组件的时候省略.jsx后缀名，可以通过配置webpack实现： 在webpack.config.js中增加resolve节点： resolve: { extensions: [".js", ".jsx", ".json"] }...
webpack打包导入的文件时候省略后缀名设置
Distance的博客
12-25 2101
在webpack.config.js中加入如下代码
vue如何在地址默认加后缀
牵着蜗牛去旅行的博客
08-31 2045
效果如输入 http://zhengxie.imlimit.com 浏览器自动生成为 http://zhengxie.imlimit.com/nationwide/ mian.js import Vue from "vue"; import App from "./App"; import router from "./router"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; imp
webpack打包配置
GoodLuck_wu5的博客
06-02 2494
webpack打包配置的步骤
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值