Webpack - 創建捆綁包時爲各種資產和資源設置路徑上下文

Question

我正在開發reactjs應用程序並使用webpack捆綁應用程序。

這是我如何設置我的index.html文件中的CSS文件的路徑。

<link rel="stylesheet" href="/styles.css" media="screen" charset="utf-8"> 

當我運行命令npm run dev本地，系統上的端口8080上運行一個Web服務器，我可以訪問應用程序。所有這些工作正常。

當我在不同的環境中部署應用程序時，由於某種策略，我們需要將應用程序託管在一個子文件夾下。

這意味着在應用程序中使用相對路徑的任何資源都需要意識到這種變化。

假設子文件夾名稱爲TEST。在這種情況下，本地可獲得的資源爲http://localhost:8080/abc.png，現在我們將以http://localhost:8080/TEST/abc.png的形式提供。

我不知道什麼是處理這種情況的最佳方法。我在想的是我將創建一個全局變量調用window_context，並且使用相對路徑的每個資源都將使用此變量。

所以包括styles.css不是我會用

<link rel="stylesheet" href="{window_context}/styles.css" media="screen" charset="utf-8"> 

如果我運行應用程序在本地變量將是空的，如果我使用的網絡包來創建一個包，我將window_context = '/TEST'。

如何使用webpack訪問變量&根據我正在運行的命令爲其分配一個值。

所以如果我說npm run dev（其在本地運行應用程序並啓動Web服務器）的window_context應設置爲「」，如果我跑npm run build（它創建了一個包），就應該設置window_context到「/ TEST '

Answer 1

output.publicPath應該是正確的選擇，是的。如果你希望它從一個env改變到另一個env，你應該爲兩個環境分別構建。如果您的webpack.config.js文件導出了一組配置對象而不是一個，webpack將自動爲每個對象執行構建。所以你可以有兩個（或更多）構建配置的數組，每個配置都有不同的publicPath。

[編輯]：這裏的webpack.config.js的一個非常簡單的例子：

var buildConfigs = []; 
module.exports = buildConfigs; 

var envs = ['dev', 'production']; 
envs.forEach(function(env) { 
    var conf = {}; 
    conf.entry = './entry.js'; 
    conf.output = {}; 
    if (env === 'production') { 
    conf.output.publicPath = '/DW'; 
    } else { 
    conf.output.publicPath = '/'; 
    } 

    buildConfigs.push(conf); 
}); 

此出口，其中所有的配置是兩個版本之間共享的陣列，除了publicPath。你的真正的編譯配置當然要大得多，但你可以通過將配置的各個部分分別定義爲變量，甚至在單獨的模塊中從你的文件require中定義來保持它的清潔。