如何在 Webpack 配置中使用 __webpack_public_path__ 变量？

Posted 2023-02-21

【中文标题】如何在 Webpack 配置中使用 __webpack_public_path__ 变量？

【英文标题】：How to use __webpack_public_path__ variable in a Webpack configuration?

【发布时间】：2017-04-01 08:53:08

【问题描述】：

我目前正在使用 React、TypeScript 和 Webpack 开发一个 Web 应用程序。我希望 Webpack 根据我只在运行时而不是在编译时知道的子域生成图像 URL。

我在 Webpacks 的文档中读过这个： http://webpack.github.io/docs/configuration.html#output-publicpath

注意：如果在编译时不知道输出文件的最终 publicPath，可以将其留空并在运行时在入口点文件中动态设置。如果您在编译时不知道 publicPath，可以省略它并在入口点设置 webpack_public_path。

webpack_public_path = myRuntimePublicPath

// 应用程序条目的其余部分

但我无法让它工作。

我在我的应用入口点设置了webpack_public_path 变量。但是如何在我的 Webpack 配置中使用它的值呢？ 我需要在这里使用它：

“模块”： “规则”：[ “测试”：/.(png|jpg|gif)(\?[\s\S]+)?$/, “装载机”：[url?limit=8192&name=/images/[hash].[ext]] ]

我需要这样做：

“加载器”：['url?limit=8192&name=__webpack_public_path__/images/[hash].[ext]']

回答

我已经成功了。因此，在我的入口点文件 (start.tsx) 中，我在导入前声明 de __webpack_public_path__ free var，并在导入后为其赋值。

/// <reference path="./definitions/definitions.d.ts" />
declare let __webpack_public_path__;

import './styles/main.scss';

/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import * as ReactDOM from 'react-dom';
import * as Redux from 'redux';
import  Root  from './components/root';

__webpack_public_path__ = `/xxxx/dist/`;

现在，当我有一个img 标签时，正在使用公共路径：

<img src=require('../../images/logo.png') />

变成：

<img src='/xxxx/dist/images/125665qsd64134fqsf.png') />

【参考方案1】：

这是我生成的 HTML 的基本设置：

<script>
    window.resourceBaseUrl = 'server-generated-path';
</script>
<script src="path-to-bundle" charset="utf-8"></script>

我的主要入口点脚本：

__webpack_public_path__ = window.resourceBaseUrl;

【讨论】：

感谢您的回答。我有类似的东西，但由于使用打字稿而遇到问题。我将使用更新的代码编辑我的问题。

出于某种原因似乎对我不起作用。使用 es6 反应

如果您对 ES6 有疑问，请按照 webpack.js.org/guides/public-path/#on-the-fly 中的说明进行操作。这对我有用。

我想你的包也作为资源在服务器上，在 baseUrl 路径下，那么你如何使用 server-generated-path 使 path-to-bundle 动态？

【参考方案2】：

不是大型 webpack 专家，但我不确定您是否以正确的方式使用该加载程序。 url-loader 可以帮助您加载代码中需要/导入的文件数据。

所以如果在你的入口点你写这样的东西：

var imageData = require("path/to/my/file/file.png");

Webpack 会看到您正在尝试导入不同于 .js 文件的内容，然后会在您配置的加载器列表中搜索，看看它是否可以使用任何加载器来加载该资源。

由于您已经设置了一个带有 test 属性的加载器，该属性与您所需的资源类型（扩展名 .png）相匹配，因此它将使用该配置的加载器 (url-loader) 来尝试将该资源加载到您的包中。

你还可以通过在 require 路径中添加加载器（以及一些查询字符串，如果你愿意的话）来告诉 webpack 他需要使用什么加载器：

var imageData = require("url-loader?mimetype=image/png!path/to/my/file/file.png");

另外，我不确定是否有 name 参数可以传递给 url-loader。

【讨论】：

感谢您的回答。 name 参数存在，我们正在使用它，因为我们遇到了在错误文件夹中生成文件的问题。我已经设法让它工作了，我将用答案更新我的帖子。

很高兴你成功了，我很想看到你更新的帖子。

使用import 和require 加载资产有区别吗？