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

Question

我目前正在使用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配置中使用它的值？我需要在这里使用它：

“模块”：{“规则”：[{“ test”：/.(png|jpg|gif)(\?[\s\S]+)?$/，“加载程序”：[url?limit=8192&name=/images/[hash].[ext]]}]}

我需要做这样的事情：

“ loaders”：['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')} />

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加载器在那里可以帮助您加载文件中需要/导入的数据。

因此，如果在您的切入点中输入类似内容：

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。