我目前正在使用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 …