Laravel7+Webpack+ES模块：多域名反向代理下JS路径适配问题

问题核心在于Webpack打包时硬编码了资源加载路径，导致反向代理带虚拟路径/extra-path时，按需加载的chunk无法正确识别基础路径。以下是具体解决步骤：

1. 动态设置Webpack运行时publicPath #

在resources/js/app.js最顶部添加代码，让Webpack根据当前页面的实际加载路径自动调整chunk的基础URL：

// 从当前加载的app.js脚本路径中提取基础路径（最可靠的方式）
const scripts = document.getElementsByTagName('script');
const currentScript = scripts[scripts.length - 1];
__webpack_public_path__ = new URL('./', currentScript.src).href;

这个方法会自动识别入口脚本的加载路径（不管是根路径还是/extra-path/js/），后续所有按需加载的chunk都会基于这个路径拼接，彻底解决路径不匹配问题。

2. 调整Laravel Mix配置 #

修改webpack.mix.js，移除硬编码的publicPath配置，让运行时的动态配置覆盖静态配置：

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/pages/**/*.js', 'public/js/pages')
   .webpackConfig({
       output: {
           chunkFilename: 'pages/[name].[chunkhash].js', // 保持chunk输出目录结构
           // 不要在这里设置publicPath，让运行时的__webpack_public_path__生效
       },
       resolve: {
           alias: {
               '@': path.resolve(__dirname, 'resources/js/')
           }
       }
   });

保留mix.setPublicPath('public')（如果之前有设置），它负责本地文件的输出目录，和Webpack运行时的资源加载路径不冲突。

3. 模板中使用Laravel辅助函数引用入口文件 #

在Blade模板里，用mix()函数引用app.js，确保入口路径自动适配当前环境：

<script src="{{ mix('js/app.js') }}"></script>

mix()会自动处理版本号，并根据当前请求的基础路径生成正确的URL，不管是主域名还是反向代理场景都能适配。

4. 验证两种场景 #

• 主域名www.examplesite.com下：__webpack_public_path__会被设置为https://www.examplesite.com/js/，chunk加载路径正常。
• 反向代理www.anotherexamplesite.com/extra-path下：__webpack_public_path__会被设置为https://www.anotherexamplesite.com/extra-path/js/，按需加载的chunk会从正确路径获取。

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