如何在我的WebPack配置中使用"__webpack_public_path__"变量？

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

//其余的应用程序条目

但我无法让它发挥作用.

我在我的app入口点设置了"webpack_public_path"变量.但是我如何在我的webpack配置中使用它的值.我需要在这里使用它:

"模块":{"规则":[{"test":/.(png | .jpg | gif)(\\\\\\ S url?limit=8192&name=/images/[hash].[ext]]+)？$ /,"加载器":[ ]}]}

我需要像这样做:

"loaders":['url？limit = 8192&name = __webpack_public_path__ /images/[hash].[ext]']

回答

我成功地使它成功了.所以在我的入口点文件(start.tsx)中,我__webpack_public_path__在导入之前声明de 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 文件不同的内容，然后会在您配置的加载器列表中进行搜索，看看它是否可以使用任何加载器来加载该资源。

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

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

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

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