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中定义来保持它的清洁。