webpack入門學習筆記12 —— 打包編譯後文件的引入路徑問題

時間 2019-11-29

標籤 webpack 入門學習筆記打包編譯文件引入路徑問題简体版

原文原文鏈接

1. 寫在前面

在一些基於Webpack的項目中，咱們可能會遇到這個狀況：使用本地開發服務器開發項目的時候，項目能夠正常運行，所須要的資源也能正常請求到。可是項目經打包編譯，部署到服務器上以後，會報錯一些 404 的錯誤，顯示一些圖片文件、css文件或js文件等找不到。javascript

這是由於打包後的項目文件的引用路徑問題，若是咱們不作額外配置，打包編譯後獲得的 .html 文件的代碼以下：css

<!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>
複製代碼

這個時候，若是是在本地開發服務器中查看項目，是沒有問題的。由於在本地開發服務器下，有且只有咱們當前開發的這一個項目，而且項目所須要的文件，也均可以經過開發服務器的根域名獲取到。好比能夠直接經過 localhost：8080/css/main.css 找到相關文件。html

可是真實的服務器上可能有不少項目，想要訪問項目文件，須要經過 域名+項目目錄 來訪問，好比 www.fengzhen8023.com/myProject/css/main/css 來訪問。java

可是如上面 .html 文件所示，文件的引入路徑中，沒有項目目錄名。因此會直接到根域名下找所須要的資源，那麼最終確定是獲取不到，報出一些404的錯誤。webpack

因此根據服務器部署的實際狀況，咱們在打包編譯項目的時候，須要作一些額外配置，使得在引入文件資源的時候，在前面加一些路徑，好比域名或者項目文件名等，使得文件能夠被正常引入。git

這也是本篇博客的主要內容，包括兩個方面：github

在全部的文件引用路徑中，添加前綴域名
單獨給圖片文件引用路徑中，添加前綴域名

2. 在全部的文件引用路徑中，添加前綴域名

爲了達到這個目的，咱們須要在 webpack.config.js 文件中進行配置，配置的方法很是簡單，這裏直接給出代碼：web

module.exports = {
    /* 節省篇幅，其餘配置已省略 */ 
    output: { 
        filename: "index.js", // 出口文件的文件名
        path: path.resolve(__dirname, "build"), //出口文件的路徑，注意必定要是絕對路徑
        publicPath: 'http://www.fengzhen8023.com/myProject/'	// 給全部的文件引用路徑中，添加前綴域名
    }
}
複製代碼

這裏將其餘的配置規則省略了，若是你想看其餘的配置規則，能夠查看個人 GitHub倉庫 - webpack-learning ,或者經過本文末尾的連接，跳轉到我以前的博客中進行查看。shell

配置完成以後，再次進行打包編譯項目，獲得的 .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>
複製代碼

如此，部署到服務器上的項目，就能夠正常訪問所須要的文件了。

3. 單獨給圖片文件引用路徑中，添加前綴域名

在上一節中，咱們知道如何給項目中所須要引入的文件添加前綴，這裏在介紹，如何單獨給圖片資源引用路徑添加前綴域名，使得項目更具靈活性。

這個時候須要使用到一個laoder—— url-loader，使用以前首先要進行安裝，命令以下：

yarn add url-loader -D
複製代碼

安裝完成以後，在 webpack.config.js 中進行以下配置：

module.exports = {
    /* 節省篇幅，其餘配置已省略 */ 
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2 * 1024, // 小於2k的圖片，直接使用Base64編碼進行處理
                        outputPath: '/image/'
                    }
                }
            }
        ]
    }
}
複製代碼

關於url-loader和Base64的相關介紹，你們能夠查看個人上一篇博客: 在項目中對打包編譯的文件進行分類，裏面有較爲詳細的介紹。

配置完成，再次編譯項目的時候，獲得的 .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文件引用路徑沒有作處理 -->
</head>

<body>
    <img src=/image/logo.png alt=""> <!-- 注意這的圖片的引用路徑 -->
    <script type=text/javascript src=index.js></script> <!-- js文件引用路徑沒有作處理 -->
</body>

</html>
複製代碼