Webpack—配置路径别名

最新推荐文章于 2025-03-25 09:40:38 发布

转载最新推荐文章于 2025-03-25 09:40:38 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/nongweiyilady/article/details/79941001

在模块化开发项目中，如Vue和React，通过Webpack配置路径别名，简化深层目录的JS或CSS模块导入，提高代码迁移灵活性。

模块化开发项目中，比如vue和react等，经常需要import不同的js或者css模块到当前目录，那么如果路径比较深的话使用相对路径就比较麻烦，而且在文件迁移的时候，如果在不同的目录下边，又得改变以下引入的路径。所以我们可以使用webpack配置路径别名，在引入的时候我们直接使用这个别名，就可以正确的指向。

我的项目目录如下：
这里写图片描述

在webpack.config.dev中的resolve下的alias属性做以下配置：

 alias: {
      "@src":path.resolve("src"),
      "@component":path.resolve("src/component"),
      "@pages":path.resolve("src/pages"),
      "@utils":path.resolve("src/utils"),
    },
 
 1
2
3
4
5
6

然后使用
- @src就可以指向到/src/
- @component指向到/src/component/

使用：

import LifeCycle from "@pages/lifecycle/lifecycle"
import stateProp from "@pages/stateProp/stateProp"
import Home from "@pages/home/home"

 
 1
2
3
4

            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
                    <div class="more-toolbox">
            <div class="left-toolbox">
                <ul class="toolbox-list">
                    
                    <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#csdnc-thumbsup"></use>
                    </svg><span class="name">点赞</span>
                    <span class="count"></span>
                    </a></li>
                    <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-Collection-G"></use>
                    </svg><span class="name">收藏</span></a></li>
                    <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-csdnc-fenxiang"></use>
                    </svg>分享</a></li>
                    <!--打赏开始-->
                                            <!--打赏结束-->
                                            <li class="tool-item tool-more">
                        <a>
                        <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                        </a>
                        <ul class="more-box">
                            <li class="item"><a class="article-report">文章举报</a></li>
                        </ul>
                    </li>
                                        </ul>
            </div>
                        </div>
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/nongweiyilady">
                <img src="https://profile.csdnimg.cn/6/9/0/3_nongweiyilady" class="avatar_pic" username="nongweiyilady">
                                        <img src="https://g.csdnimg.cn/static/user-reg-year/2x/3.png" class="user-years">
                                </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit"><a href="https://blog.csdn.net/nongweiyilady" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">Tiramisu_C</a></span>
                                        </div>
                <div class="text"><span>发布了84 篇原创文章</span> · <span>获赞 221</span> · <span>访问量 92万+</span></div>
            </div>
                            <div class="right-message">
                                        <a href="https://bbs.csdn.net/forums/p-nongweiyilady" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板
                    </a>
                                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                </div>
                        </div>
    </div>
</article>

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nongweiyilady/article/details/79941001