如何在网页包配置中使用uuu webpack u public u path uuu变量？

Question

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

我在WebPacks的留档上看到http://webpack.github.io/docs/configuration.html#output-publicpath

注意：如果在编译时输出文件的最终公共路径未知，则可以将其保留为空，并在运行时在入口点文件中动态设置。如果您在编译时不知道publicPath，可以忽略它，并在入口点上设置webpack_public_path。

webpack_public_path

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

但我不能让它工作。

我已经在我的应用程序入口点中设置了webpack\u public\u path变量。但是我如何在我的网页配置中使用它的值呢？我需要在这里使用它：

"模块"：{"规则": [ { "测试"： /.（png|jpg|gif）（\？[\s\S]）？$/，"loaders"：[url？限制=8192

我需要做这样的事情：

“加载器”：['url？限制=8192

我已经设法让它工作了。因此，在我的切入点文件（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')} />




Answer 1

不是一个大的网页包专家，但我不确定你使用的加载程序在正确的方式。url加载器帮助您加载代码中所需/导入的文件数据。

因此，如果在你的入口点写下如下内容：

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

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

由于您已经设置了一个加载程序，该加载程序具有与所需资源类型（extension.png）匹配的test属性，因此它将使用该配置的加载程序（url加载程序）尝试将该资源加载到包中。

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

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

此外，我甚至不确定是否有一个名称参数可以传递给url加载程序。

Answer 2

以下是我生成的超文本标记语言的基本设置：

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

我的主要入口点脚本：

__webpack_public_path__ = window.resourceBaseUrl;