只有当我的应用程序未托管在预先存在的路径上时,资产才会正确映射
Assets only correctly map up when my application isn't hosted on a pre-existing path
我正在开发用于多个客户站点的应用程序。它们作为子域或路径(我无法控制)托管,如下所示:
这是我的 Webpack 1 配置:
module: {
loaders: [
{
...
},
{
test: /\.(woff2?|eot|svg|ttf|md|jpg|png)$/,
loader: 'file?name=[hash].[ext]'
}
]
},
output: {
path: __dirname + "/dist/build/",
filename: "app.min.js"
}
有了这个,我的资产被编译到一个 /build/
文件夹中,其中还包含主应用程序 JavaScript 文件:
我遇到的问题是,如果应用程序托管在预先存在的路径上(URL 上面的示例 2),则找不到已编译的资产,但如果不存在路径,则可以完美加载。进行一些调试表明,无论出于何种原因,必须指定 /build 目录,以便在第二个 URL 示例中加载资产,但指定 /build 打破第一个 URL 例子:
- https://application.example.com/compiled-asset.png ✓
- https://example.com/application/compiled-asset.png⇐404
- https://application.example.com/build/compiled-asset.png⇐404
- https://example.com/application/build/compiled-asset.png ✓
我做错了什么?
似乎这个问题的答案是将 publicPath 属性 添加到 loader
本身,如下所示:
loader: 'file-loader?name=[hash].[ext]&publicPath=./build/'
我之前曾尝试过使用单独的 publicPath
属性,但这并没有实现任何目标。
我正在开发用于多个客户站点的应用程序。它们作为子域或路径(我无法控制)托管,如下所示:
这是我的 Webpack 1 配置:
module: {
loaders: [
{
...
},
{
test: /\.(woff2?|eot|svg|ttf|md|jpg|png)$/,
loader: 'file?name=[hash].[ext]'
}
]
},
output: {
path: __dirname + "/dist/build/",
filename: "app.min.js"
}
有了这个,我的资产被编译到一个 /build/
文件夹中,其中还包含主应用程序 JavaScript 文件:
我遇到的问题是,如果应用程序托管在预先存在的路径上(URL 上面的示例 2),则找不到已编译的资产,但如果不存在路径,则可以完美加载。进行一些调试表明,无论出于何种原因,必须指定 /build 目录,以便在第二个 URL 示例中加载资产,但指定 /build 打破第一个 URL 例子:
- https://application.example.com/compiled-asset.png ✓
- https://example.com/application/compiled-asset.png⇐404
- https://application.example.com/build/compiled-asset.png⇐404
- https://example.com/application/build/compiled-asset.png ✓
我做错了什么?
似乎这个问题的答案是将 publicPath 属性 添加到 loader
本身,如下所示:
loader: 'file-loader?name=[hash].[ext]&publicPath=./build/'
我之前曾尝试过使用单独的 publicPath
属性,但这并没有实现任何目标。