WebpackのDefinePluginで環境変数を定義する

2020-12-30

webpackのDefinePluginでグローバル環境変数が定義できる。

new webpack.DefinePlugin({
  // Definitions...
});

コンパイル時直接テキスト置換でインラインかされるので、文字列の値を定義したい場合、実際のクォーテーションを含める必要がある¹

Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with alternate quotes, such as ‘“production”’, or by using JSON.stringify(‘production’).

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true), // true
  BROWSER_SUPPORTS_HTML5: true, // true
  VERSION: JSON.stringify('5fa3b9'), // '5fa3b9'
  'SERVICE_URL': 'https://dev.example.com', // highly possible to recieve a compile error
  'typeof window': '"object"',
  TWO: '1+1', // 2
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});

ランタイム値も可能

With Typescript

Typescriptコンパイラも認識できるように、declare定義が必要²。

// some.d.ts
declare var PRODUCTION: boolean;
declare var VERSION: string;

With Jest

jest.config.jsに再定義が必要らしい³

"jest": {
    "globals": {
      "PRODUCTION": true
    }
  }