Cara Mudah Pakai Environment Variable dengan Webpack

Misalnya kita punya project web dengan konfigurasi environment yang beda antara dev & production (seperti normalnya projek web) kayak gini:

DEV PRODUCTION
DB 192.168.0.99 192.168.0.100
Assets dev.assets.com live.assets.com
API server1.api.com server2.api.com

Ada beberapa cara untuk pake variabel-variabel itu di aplikasi kita antara lain:

  1. Pake HtmlWebpackPlugin untuk injeksi file dev.env.js atau prod.env.js ke file HTML dalam bentuk tag <script>
  2. Bikin satu file env.js yang isinya bisa dev atau production vars tergantung di direktori mana dia dibuat. File ini nanti dimuat oleh aplikasi pake <script>.
  3. Ada juga yang pake JSON.

Untuk projek yang pake ES6 & Webpack, ada cara yang menurut saya lebih sip. Intinya environment vars kita bikin sebagai modul ES6, jadi bisa diimpor kayak modul ES6 biasa.

Kita bikin dua file, satu untuk masing-masing env:

//file: dev.env.js
export default {
    type:'dev',
    db:'192.168.0.99',
    assets:'dev.assets.com',
    api:'server1.api.com'
}

Satu lagi untuk production:

//file: production.env.js
export default {
    type:'production',
    db:'192.168.0.100',
    assets:'live.assets.com',
    api:'server2.api.com'
}

Di file index.js & semua file yang butuh baca environment vars:

//file: index.js

//import pake nama alias, jadi modul ini (index)
//nggak perlu tau itu file dev.env.js atau prod.env.js.
import CONFIG from 'env-config';

console.log('CONFIG',CONFIG);

Gimana caranya supaya skrip *.env.js bisa dipake sebagai modul kayak di atas?

Gampang. Tinggal atur di konfigurasi webpack. Kita pake opsi yang namanya resolve.alias. Dokumentasinya bisa dibaca sendiri di sini.

//file: webpack.config.js
const webpack = require('webpack')
const path = require('path');

module.exports = env => {
  const envjs = env === 'prod' ? 'production.env.js' : 'dev.env.js';
  const out = env === 'prod' ? 'prod' : 'dev';

  console.log('ENV:',env);

  return {
    entry: path.resolve(__dirname, 'src/index.js'),
    resolve: {
      extensions: ['.js'],
      alias: {
        //ini yg paling penting, jgn lupa tanda $
        'env-config$': path.resolve(__dirname, envjs)
      }
    },
    output: {
      path: path.resolve(__dirname, 'build', out),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      ]
    }
  }
}

Di file package.json, kita tambahin skrip:

"scripts":{
  "build:prod": "webpack --env prod",
  "build:dev":"webpack --env dev"
}

Untuk bikin DEV build, kita jalanin di terminal:

npm run build:dev

Untuk PRODUCTION:

npm run build:prod

Buat ngetes, bisa pake server PHP:

php -S localhost:9000 -t .

Hasilnya kurang lebih begini:

localhost:9000/index-dev.html

localhost:9000/index-prod.html

Contoh projeknya bisa diklon dari sini:
https://gitlab.com/masputih/webpack-env-var

Gampang toh? šŸ™‚

Mudah-mudahan bermanfaat.

Also in this category ...


One Comment

  1. My name is Alex! I run my Youtube channel with Unity tutorials and now I’m on one about 8-directional top down movement. Please tell me is this your artwork in your “SpriteSheet class for AS3Isolib” article. I mean this one https://i1.wp.com/masputih.com/wordpress/wp-content/uploads/2011/01/f0.png
    If it is then is there any possibility for me to use it in my video tutorial? Credits will be given for sure)
    Best regards.

      (Quote)

Leave a Reply

Your email address will not be published. Required fields are marked *