1. 寫在前面
在一些基于Webpack的項(xiàng)目中，我們可能會(huì)遇到這個(gè)情況：使用本地開發(fā)服務(wù)器開發(fā)項(xiàng)目的時(shí)候，項(xiàng)目可以正常運(yùn)行，所需要的資源也能正常請(qǐng)求到。但是項(xiàng)目經(jīng)打包編譯，部署到服務(wù)器上之后，會(huì)報(bào)錯(cuò)一些 404 的錯(cuò)誤，顯示一些圖片文件、css文件或js文件等找不到。
這是因?yàn)榇虬蟮捻?xiàng)目文件的引用路徑問題，如果我們不做額外配置，打包編譯后得到的 .html 文件的代碼如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=css/main.css rel=stylesheet> <!-- 注意這里的文件引入路徑 -->
</head>
<body>
<img src=logo.png alt=""> <!-- 注意這里的文件引入路徑 -->
<script type=text/javascript src=index.js></script> <!-- 注意這里的文件引入路徑 -->
</body>
</html>
這個(gè)時(shí)候，如果是在本地開發(fā)服務(wù)器中查看項(xiàng)目，是沒有問題的。因?yàn)樵诒镜亻_發(fā)服務(wù)器下，有且只有我們當(dāng)前開發(fā)的這一個(gè)項(xiàng)目，并且項(xiàng)目所需要的文件，也都可以通過開發(fā)服務(wù)器的根域名獲取到。比如可以直接通過 localhost：8080/css/main.css 找到相關(guān)文件。
但是真實(shí)的服務(wù)器上可能有很多項(xiàng)目，想要訪問項(xiàng)目文件，需要通過 域名+項(xiàng)目目錄 來訪問，比如 www.fengzhen8023.com/myProject/css/main/css 來訪問。
但是如上面 .html 文件所示，文件的引入路徑中，沒有項(xiàng)目目錄名。所以會(huì)直接到根域名下找所需要的資源，那么最終肯定是獲取不到，報(bào)出一些404的錯(cuò)誤。
所以根據(jù)服務(wù)器部署的實(shí)際情況，我們?cè)诖虬幾g項(xiàng)目的時(shí)候，需要做一些額外配置，使得在引入文件資源的時(shí)候，在前面加一些路徑，比如域名或者項(xiàng)目文件名等，使得文件可以被正常引入。
這也是本篇博客的主要內(nèi)容，包括兩個(gè)方面：
- 在所有的文件引用路徑中，添加前綴域名
- 單獨(dú)給圖片文件引用路徑中，添加前綴域名
2. 在所有的文件引用路徑中，添加前綴域名
為了達(dá)到這個(gè)目的，我們需要在 webpack.config.js 文件中進(jìn)行配置，配置的方法非常簡(jiǎn)單，這里直接給出代碼：
module.exports = {
/* 節(jié)省篇幅，其他配置已省略 */
output: {
filename: "index.js", // 出口文件的文件名
path: path.resolve(__dirname, "build"), //出口文件的路徑，注意一定要是絕對(duì)路徑
publicPath: 'http://www.fengzhen8023.com/myProject/' // 給所有的文件引用路徑中，添加前綴域名
}
}
這里將其他的配置規(guī)則省略了，如果你想看其他的配置規(guī)則，可以查看我的 GitHub倉庫 - webpack-learning ,或者通過本文末尾的鏈接，跳轉(zhuǎn)到我之前的博客中進(jìn)行查看。
配置完成之后，再次進(jìn)行打包編譯項(xiàng)目，得到的 .html 文件如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=http://www.fengzhen8023.com/myProject/css/main.css rel=stylesheet> <!-- 注意這里的文件引入路徑 -->
</head>
<body>
<img src=http://www.fengzhen8023.com/myProject/logo.png alt=""> <!-- 注意這里的文件引入路徑 -->
<script type=text/javascript src=http://www.fengzhen8023.com/myProject/index.js></script> <!-- 注意這里的文件引入路徑 -->
</body>
</html>
如此，部署到服務(wù)器上的項(xiàng)目，就可以正常訪問所需要的文件了。
3. 單獨(dú)給圖片文件引用路徑中，添加前綴域名
在上一節(jié)中，我們知道如何給項(xiàng)目中所需要引入的文件添加前綴，這里在介紹，如何單獨(dú)給圖片資源引用路徑添加前綴域名，使得項(xiàng)目更具靈活性。
這個(gè)時(shí)候需要使用到一個(gè)laoder—— url-loader，使用之前首先要進(jìn)行安裝，命令如下：
yarn add url-loader -D
安裝完成之后，在 webpack.config.js 中進(jìn)行如下配置：
module.exports = {
/* 節(jié)省篇幅，其他配置已省略 */
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 2 * 1024, // 小于2k的圖片，直接使用Base64編碼進(jìn)行處理
outputPath: '/image/'
}
}
}
]
}
}
關(guān)于url-loader和Base64的相關(guān)介紹，大家可以查看我的上一篇博客: 在項(xiàng)目中對(duì)打包編譯的文件進(jìn)行分類，里面有較為詳細(xì)的介紹。
配置完成，再次編譯項(xiàng)目的時(shí)候，得到的 .html 文件中的代碼如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
<link href=css/main.css rel=stylesheet> <!-- css文件引用路徑?jīng)]有做處理 -->
</head>
<body>
<img src=/image/logo.png alt=""> <!-- 注意這的圖片的引用路徑 -->
<script type=text/javascript src=index.js></script> <!-- js文件引用路徑?jīng)]有做處理 -->
</body>
</html>
4. 寫在最后
以上便是這篇博客的全部?jī)?nèi)容，如果你想對(duì)其他的文件單獨(dú)進(jìn)行引用路徑的修改，可以查閱相關(guān)的文檔，不過大致思路是：
給處理這些文件的loader配置相關(guān)的屬性，來指定打包編譯后，文件的引用路徑。
