在前端工程化的构建过程中，Webpack 是不可或缺的一个工具。它可以将多个 JavaScript 模块打包成一个文件，并解决了许多文件路径的问题。但是，在一些情况下，Webpack 的相对路径配置还是存在一些问题，因此本文将分享如何使用 Webpack4.0 来解决 relative path 的问题。
问题描述
假设我们有一个项目结构如下：
-- -------------------- ---- ------- ------ --- ---- - --- ----------- - - --- ------- - - - --- -------- - - - --- ---------- - - --- ------- - - - --- -------- - - - --- ---------- - --- ------ - - --- ----- - - - --- -------- - - - --- -------- - - --- ------ - - - --- -------- - - - --- --------- - --- -------- - --- --------- --- ----- --- ------------ --- -----------------
我们在导入组件时，通常会这样写：
import Button from "../../components/Button"; import Header from "../../components/Header";
这样的代码看起来很繁琐，而且当我们的文件层级很深时，维护相对路径会更加困难。
解决方案
使用 @ 指代项目根目录
Webpack4.0 提供了一种简洁的方式来解决路径问题，那就是使用 @ 来代表根目录。我们需要在 webpack.config.js 中配置别名：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
------ -
---- ----------------------- -------
--
--
--然后，在我们的代码中就可以这样写：
import Button from "@/components/Button"; import Header from "@/components/Header";
这样的代码看起来是不是清爽了很多呢？
在 TypeScript 中使用 path mapping 配置
在 TypeScript 项目中，我们同样可以使用路径映射来解决相对路径的问题。
我们需要在 tsconfig.json 中配置 paths：
-- -------------------- ---- -------
-
------------------ -
---------- ----
-------- -
----------------- -----------------------
------------ ------------------
------ -----------
-
-
-然后，在我们的代码中就可以像这样导入：
import Button from "@/components/Button"; import Header from "@/components/Header";
在 Vue 项目中使用 path mapping 配置
在 Vue.js 项目中，我们同样可以使用路径映射来解决相对路径的问题。
我们需要在 vue.config.js 中配置路径别名：
-- -------------------- ---- -------
-------------- - -
----------------- -
-------- -
------ -
---- ----------------------- -------
--
--
--
--然后，在我们的 Vue 组件中就可以像这样导入：
import Button from "@/components/Button.vue"; import Header from "@/components/Header.vue";
结论
相对路径的维护一直是一个比较棘手的问题，但是借助 Webpack4.0 提供的功能，我们可以非常简单地解决这个问题。希望本文对大家在前端工程化的构建过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751ae9b8bd460d3ad8bd78f