今さら人に聞けないwebpackでFirebaseを取り込む

前回、npmでfirebaseをインストールする方法を書いた。

jumbomonaca.hatenablog.com

そこで今回は、インストールしたfirebaseをwebpackで一つにする方法を調査した。

app.js
webpack.config.js

ディレクトリ構造は、メインロジックを書いたapp.jsとwebpackの設定を書いたwebpack.config.jsが同一ディレクトリにあるとする。

まずは、app.jsでfirebaseをインクルード。

//app.js
var firebase = require('firebase/app');


//apiKeyとauthDomainとprojectIdは任意の値を設定
var config = {
  apiKey: "xxxx",
  authDomain: "",
  projectId: ""
};

firebase.initializeApp(config);

//mainロジック

app.jsと同一ディレクトリにあるwebpack.config.jsを設定する。

//webpack.config.js
const path = require('path');
module.exports = {
  //mode: 'production',
  mode: 'development',
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'app.min.js'
  }
}

あとは、ターミナルで、npx webpack --config webpack.config.jsをうつとpublicディレクトリの直下にあるjsディレクトリにapp.min.jsが出力される。