從webpack配置存取模式

Question

我在webpack.config.js中有以下程式碼：

module.exports = {
    entry: {
        index: "./src/index.js",
        content: "./src/content.js"
    },
    mode: "production", // 如何從React程式碼存取此值？
    devtool: 'inline-source-map',
    …

根據mode是'development'還是'production'，我需要為PayPal使用不同的客戶端ID（沙盒或真實環境）。我希望避免重複。那麼，我如何從我的React程式碼存取該值？

Answer 1

您可以透過將模組匯出擴展為箭頭函數來存取該模式。它是第二個參數（args）的一部分，我們可以解構。

module.exports = (env, { mode }) => {
  const isDevMode = mode === 'development';

  return {
     ...webpack配置在这里
   }
}

然後，您可以使用類似webpack.define的方法建立客戶端環境變量，例如：

## 在webpack配置之前

const SOME_STUFF = {
  production: "a",
  development: "b"
};

const bakeEnvironmentValues = (values, mode) => {
  return values[mode];
};


## 在plugins中

 new webpack.DefinePlugin({
     SOME_ENV: JSON.stringify(
         bakeEnvironmentValues(SOME_STUFF, mode)
  )}),

然後，您可以透過在客戶端JS中的任何位置引用SOME_ENV（或您所稱呼的任何名稱）來存取該環境變數。