Можете ли вы установить псевдоним в веб-пакете, который заменит все совпадающие вхождения во всех файлах, а не только требует?

Question

Я пытаюсь настроить приложение реагирования для легкого брендинга и стиля,

есть некоторые жестко закодированные строки брендинга, для которых я не хочу использовать хранилище, и я не хочу передавать свойства всем компонентам для брендинга. Но я хотел бы иметь возможность менять некоторые строки глобально по прихоти.

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

resolve: {
  alias: {
    '~~BRAND_NAME': 'something'
  }
}

затем

render() { 
  return <div> ~~BRAND_NAME </div>
}

компилируется в

render() {
  return <div> something </div>
}

Answer 1

Используйте веб-пакет Определить плагин для этого

в конфигурационном файле вашего веб-пакета, в разделе плагинов добавьте

const webpack = require('webpack');
...
new webpack.DefinePlugin({
   'BRAND_NAME': JSON.stringify('something')
})

Затем в функции отображения вашего приложения поместите имя переменной в фигурные скобки

 return <h1>{BRAND_NAME}</h1>

Подробнее об этом здесь

Answer 2

Похоже, это работа для DefinePlugin :

plugins: [
  new webpack.DefinePlugin({ 
    'BRAND_NAME': 'Some brand name'  // not sure about "~" working, but you can try 
  }),
],

тогда в приложении вы просто ссылаетесь на него как на глобальную переменную:

render() { 
  return <div>{BRAND_NAME}</div>
}