Как использовать переменную «__webpack_public_path__» в моей конфигурации WebPack?

Question

В настоящее время я работаю над веб-приложением, используя React, Typcript и WebPack. Я хочу, чтобы WebPack генерировал образы Urls в соответствии с субдоменом, который я знаю только во время выполнения, а не во время компиляции.

Я прочитал это на документации WebPacks'S: http://webpack.github.io/docs/configuration.html#output-publicpath

Примечание: В случаях, когда в конечном итоге publicPath из выходных файлов не известен во время компиляции, он может быть оставлен пустым и устанавливается динамически на runtime в файле точки входа. Если вы не знаете publicPath во время компиляции, вы можете опустить его и установить webpack_public_path в своей точке входа.

webpack_public_path = myRuntimePublicPath

// остальная часть вашего входа приложения

Но я не могу заставить его работать.

Я установил переменную «webpack_public_path» в точку входа в приложение. Но как я могу использовать его значение в моей конфигурации webpack. мне нужно использовать его здесь:

"Модуль": { "правила": [{ "тест": /.(png|jpg|gif)(\?[\s\S] ? +) $ /, "грузчики": [url?limit=8192&name=/images/[hash].[ext]] } ] }

мне нужно сделать smething так:

"грузчики": [» URL? предел = 8192 & имя = __webpack_public_path__ /images/[hash].[ext] ']

ОТВЕТ

мне удалось заставить его работать. Поэтому в моем файле точки входа (start.tsx) я объявляю de __webpack_public_path__ бесплатный 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

не большой специалист WebPack, но я не уверен, что вы используют этот загрузчик правильно. Узел-загрузчик предназначен для загрузки файлов, которые требуются/импортируются в ваш код.

Так что если в вашей точке входа вы пишете что-то вроде:

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

Webpack будет видеть, что вы пытаетесь импортировать что-то другое, чем .js файл, а затем будет искать в настроенном списке загрузчика, чтобы увидеть если он может использовать любой загрузчик для загрузки этого ресурса.

Поскольку вы установили загрузчик с атрибутом test, который соответствует вашему типу ресурса (расширение .png), он будет использовать этот настроенный загрузчик (url-loader), чтобы попытаться загрузить этот ресурс в ваш комплект.

Вы можете также сказать, что WebPack погрузчик он должен использовать, предваряя загрузчик (и некоторые строки запроса, если вы хотите) в пути требуется:

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

Кроме того, я не уверен, что даже a name, вы можете перейти на url-loader.

Answer 2

Вот моя основная установка с точки зрения генерируемой HTML:

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

мой основной точкой входа сценария:

__webpack_public_path__ = window.resourceBaseUrl;