Webpack配置publicPath：如何保留原服务端口并添加子文件夹路径？

我用Webpack在localhost:8000托管资源，这些资源要在localhost:3000的宿主页面加载。现在想让Webpack资源从子文件夹提供服务，同时保留Webpack服务器的域名和端口，该怎么配置？

场景1

// config
output: {
    publicPath: 'auto'
}

// result
http://localhost:8000/some-file.js // 端口正确但缺少子文件夹

场景2

// config
output: {
    publicPath: '/subfolder'
}

// result
http://localhost:3000/subfolder/some-file.js // 端口变为宿主页面的端口，不符合需求

解决方案
要同时保留Webpack服务器的域名/端口并添加子文件夹前缀，你可以直接将auto与子路径拼接，Webpack会自动将auto解析为当前服务器的基础URL，再拼接子路径：

// config
output: {
    publicPath: 'auto/subfolder/'
}

// result
http://localhost:8000/subfolder/some-file.js

如果需要适配不同环境的域名端口，也可以通过动态配置生成publicPath：

const url = require('url');

// config
output: {
    publicPath: url.format({
        protocol: process.env.NODE_ENV === 'production' ? 'https' : 'http',
        hostname: process.env.WEBPACK_HOST || 'localhost',
        port: process.env.WEBPACK_PORT || 8000,
        pathname: '/subfolder/'
    })
}

这种方式既能灵活适配不同环境，又能确保资源路径始终指向Webpack服务器的子文件夹。

内容的提问来源于stack exchange，提问作者Carlton