Webpack でバンドルする JS に外部変数を注入する

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー Webpack

ふと Webpack でバンドルする JS に外部変数を注入したくなったので試してみました。

webpack.config.js

まずはコードを。

const { DefinePlugin } = require('webpack');
const fs               = require('fs');

// ファイル存在チェック
const isExistFile = (file) => {
    try {
        fs.statSync(file);
        return true;
    } catch(err) {
        if(err.code === 'ENOENT') {
            return false;
        }
    }
};
// 設定ファイル読み込み
const configFile = `./src/config/config.txt`;
if(!isExistFile(configFile)) {
    throw new Error('設定ファイルが存在しません。');
}
const strOrigin = fs.readFileSync(configFile, 'utf8');
// PARAMS1 => 'XXXXX', PARAMS2 => 'YYYYY' 等の文字列があった場合、それらを正規表現で取得
const regex = /'PARAMS[\d]+'[\s]+=> '(.*)'/ig;
let params = [];
while (result = regex.exec(strOrigin)) {
    // 配列にセット
    params.push(RegExp.$1);
}
// console.log(params);
// [ 'XXXXX', 'YYYYY' ]
const configs = {
    // 略
    plugins: [
        new DefinePlugin({
            'window.params': JSON.stringify(params), // 外部の値を Webpack でバンドルする JS 内に持ち込む
        }),
        // 略
    ],
    // 略
};

module.exports = configs;

肝は DefinePlugin 。これで外部ファイル等の変数をバンドルした JS 内に持ち込むことができます。

JS

console.log(window.params);
// [ 'XXXXX', 'YYYYY' ]

JS 内では DefinePlugin の中でキーとして指定したプロパティでアクセスできます。

参考

複数回マッチの正規表現

配列

Webpack で外部変数を読み込み

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧