ANSWER

Question

我目前正在使用React，Typescript和WebPack开发Web应用程序。我希望WebPack根据我在运行时而不是在编译时知道的子域生成映像Urls。

我已经在WebPacks的文档中读到了这个： http://webpack.github.io/docs/configuration.html#output-publicpath

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


webpack_public_path = myRuntimePublicPath

//其余的应用程序条目

但我无法让它发挥作用。

我已经设置了＆＃34; webpack_public_path＆＃34;我的app入口点中的变量。但是我如何在我的webpack配置中使用它的值。我需要在这里使用它：

＆＃34; module＆＃34;：{ ＆＃34;规则＆＃34;：[ { ＆＃34; test＆＃34;：/。（png | .jpg | gif）（\\\\\\ S]+）？$ /，＆＃34;装载机＆＃34;：[url?limit=8192&name=/images/[hash].[ext]] } ] }

我需要做这样的事情：

＆＃34;加载者＆＃34;：[＆＃39; url？limit = 8192＆amp; name = __ webpack_public_path __ / images / [hash]。[ext]＆＃39;]

ANSWER

我设法让它发挥作用。所以在我的入口点文件（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

这是我在生成的html方面的基本设置：

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

我的主要入口点脚本：

__webpack_public_path__ = window.resourceBaseUrl;

Answer 2

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

因此，如果在您的入口点，您写了类似的内容：

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

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

由于您已经设置了一个符合所需资源类型（扩展名为.png）的test属性的加载器，因此它将使用该配置的加载器（url-loader）尝试将该资源加载到您的bundle中。

您还可以通过在require路径中预先加载加载器（以及一些查询字符串）来告诉webpack他需要使用哪个加载器：

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

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

如何使用＆＃34; __ webpack_public_path __＆＃34;我的WebPack配置中的变量？

ANSWER

2 个答案: