你可以在 webpack 中设置一个别名来替换所有文件中的所有匹配项，而不仅仅是需要吗？答案

【问题标题】：Can you set an alias in webpack which will replace all matching occurrences in all files and not just requires?你可以在 webpack 中设置一个别名来替换所有文件中的所有匹配项，而不仅仅是需要吗？
【发布时间】：2018-10-15 20:57:29
【问题描述】：

我正在尝试配置我的 React 应用，以便轻松打造品牌和造型，

有一些我不想使用 store 的硬编码品牌字符串，我不想通过所有组件传递属性以进行品牌塑造。但我希望能够随心所欲地在全球范围内更改一些字符串。

我使用 webpack alias' 来简化请求和导入，但这似乎不适用于 react 组件渲染函数中的文本，比如设置

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

然后

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

正在编译为

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

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案1】：

好像是DefinePlugin的工作：

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

然后在应用程序中，您只需将其作为全局变量引用：

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

【讨论】：

这只适用于变量对吧？有没有办法替换 webpack 解析的任何文件中的任何键字符串？甚至在不使用 react 的 index.html 中说？

【解决方案2】：

为此使用 webpack 定义插件

在你的 webpack 配置文件的插件部分，添加这个

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

然后在你的应用渲染函数中，将变量名放在大括号中

 return <h1>{BRAND_NAME}</h1>

更多信息here

【讨论】：

这只适用于变量对吧？有没有办法替换 webpack 解析的任何文件中的任何键字符串？甚至在不使用 react 的 index.html 中说？
你可以使用 htmldefine 插件