Webpack 是一个广泛使用的前端打包工具，它可以将多个模块打包成一个或多个文件，以提高前端项目的可维护性和性能。但在实际开发过程中，由于各种原因，我们可能会遇到某些文件路径错误的情况，导致前端项目无法正常工作。本文将着重介绍 Webpack 打包后文件路径不正确的解决办法，希望能够帮助读者更好地掌握 Webpack 的使用和应用。
问题描述
在 Webpack 打包后的项目中，我们可能会遇到以下几种文件路径错误的情况：
- 打包后的文件路径不正确，如页面加载不出来、图片无法显示等；
- 打包后的文件名或文件夹名不正确，如加载的 js 文件名不符合预期；
- 在 Webpack 配置中使用了相对路径或绝对路径，但结果并不是我们想要的，如从根目录寻找文件却找不到。
这些问题的原因可能有多种，如路径别名、路径分隔符、缺少插件等，下面将针对每种问题分别详细介绍其解决方法。
打包后文件路径不正确
当我们在 Webpack 中使用相对路径或绝对路径来引用模块时，Webpack 会将这些路径转换为打包后的路径。但有时这些路径并不符合我们的预期，如：
import { add } from '../src/js/math';
import imgSrc from '../src/img/test.png';
const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);在以上代码中，我们从 ../src/js/math 中引用了一个函数，从 ../src/img/test.png 中引用了一张图片。这些路径都是相对于当前文件的，但打包后的路径可能会变为：
import { add } from 'js/math.e2b5c8b5.js';
import imgSrc from 'img/test.423f8c98.png';
const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);这里的 js/math.e2b5c8b5.js 和 img/test.423f8c98.png 是由 Webpack 根据文件的哈希值生成的，它们对应的路径并不是我们所期望的。
解决这个问题的方法是使用 Webpack 的 resolve 属性来配置路径别名和默认后缀名。下面是一个示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---------
-------- -
------ -
---- ----------------------- -------
------ ----------------------- ----------
------- ----------------------- ----------
--
----------- ------- ------- --------
-
-在以上代码中，我们定义了三个别名，分别对应了 src、src/js 和 src/img 三个文件夹，并将它们对应到了 @、@js 和 @img 三个别名上。这样就可以方便地使用别名来引用模块，如：
import { add } from '@js/math';
import imgSrc from '@img/test.png';
const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);这样打包后的路径就会变为：
import { add } from 'js/math.js';
import imgSrc from 'img/test.png';
const img = new Image();
img.src = imgSrc;
document.body.appendChild(img);打包后文件名或文件夹名不正确
在 Webpack 打包后，文件名或文件夹名可能会改变，导致我们在使用时出现问题。如以下代码：
import Vue from 'vue';
import router from './router';
import App from './App.vue';
new Vue({
router,
render: h => h(App)
}).$mount('#app');这里我们从 ./router 中引用了一个路由器，从 ./App.vue 中引用了一个 Vue 组件。但打包后的文件名可能会变为：
import Vue from 'vue';
import router from './router.e2b5c8b5.js';
import App from './App.e2b5c8b5.vue';
new Vue({
router,
render: h => h(App)
}).$mount('#app');这里的文件名 router.e2b5c8b5.js 和 App.e2b5c8b5.vue 并不符合我们所期望的。
解决这个问题的方法是使用 Webpack 插件来进行文件名和文件夹名的控制。下面以 Vue 项目为例，介绍如何通过 Webpack 的插件来控制打包后的文件名。
首先，我们需要安装一个插件：
npm install vue-cli-plugin-filename-hash -D
然后，在项目根目录下新建一个 vue.config.js 文件：
-- -------------------- ---- -------
-- -------------
-------------- - -
---------------- ------
----------------- -
-------- -
--- --------------------------
----- ----------------- --------------- --------
--
-
-
-在以上代码中，我们使用了 VueCliPluginFilenameHash 这个插件来控制文件名。其中，page 参数是一个数组，表示哪些页面需要被打包并需要进行文件名控制。这里我们将 chunk-vendors、chunk-common 和 index 三个页面加入了数组中。
最后，我们可以在 main.js 中直接使用插件提供的 $filename 方法来获取打包后的文件名：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ------ ---- ----------- ------ --- ---- ------------ --- ----- ------- ------- - -- ------ ------------------ ------------------------- ------------------- ----------------------- ----------------
这样打包后的路径就会变为：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ------ ---- -------------- ------ --- ---- --------------------------------- --- ----- ------- ------- - -- ------ ------------------ ------------------------- ------------- ----------------------- --------------------------------
使用相对路径或绝对路径
在 Webpack 配置文件中，我们可能会使用相对路径或绝对路径来引用其他模块或资源。但由于相对路径和绝对路径的解析规则与操作系统有关，所以可能会出现路径不正确的情况。
如下面这个例子：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -----------------
------- -
----- ---------
--------- -----------
-
-在以上代码中，我们通过相对路径 ./src/index.js 来引用入口模块，使用相对路径 ./dist 和文件名 bundle.js 来定义输出目录和输出文件名。
但由于 Windows 和 Linux 的路径分隔符不同，可能会导致 path 字段不正确。此时我们可以使用 path 模块来解决这个问题：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
-
-在以上代码中，我们使用了 path.resolve() 方法来将相对路径转换为绝对路径，并合并成一个正确的路径。这样就可以确保输出目录的路径是正确的。
总结
Webpack 打包后文件路径不正确是一个比较常见的问题，在实际开发中需要了解其解决方法。本文针对打包后文件路径不正确、打包后文件名或文件夹名不正确，以及使用相对路径或绝对路径三种情况进行了详细介绍，希望能够对读者理解 Webpack 的使用和应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa2d8548841e9894658cad