webpack 側でグローバル変数を定義する

webpack を通すソースコードで、外部 JSON などをグローバル変数で読みたいとき。

DefinePlugin を使う

webpack.config.js

const { DefinePlugin } = require("webpack");
const { readFileSync } = require("fs");

/** @type {import("webpack").Configuration} */
module.exports = {
  /***** 中略 *****/
  plugins: [
    new DefinePlugin({
      "window.GLOBAL_VARIABLES": JSON.stringify({
        env: {
          NODE_ENV: process.env.NODE_ENV,
        },
        title: "Hello, World!",
        "answer to life the universe and everything": 42,
      }),
      "window.PACKAGE": readFileSync("./package.json", { encoding: "utf8" }),
    }),
  ],
};

こうすることで、ソースコード上からグローバル変数としてデータを取得できる。

console.log(window.GLOBAL_VARIABLES);
console.log(window.PACKAGE);