
Let's say you have a JavaScript web app, built by Webpack, in which you have some hard coded API keys (for example Firebase, Google Maps etc). Now, you want to avoid hardcoding the API keys (as a good developer that you are) and at the same time provide different set of API keys for each enviornment - dev, QA, production, etc.

If you have a backend, serving your app, then it's pretty trivial to accomplish. But, what if you do not have a backend, and you serve your JavaScript app as a static asset by Nginx? How will you achieve the separation of API keys?

Then you do it during the **build time**. You need to build your app, passing API keys (or whatever values that you need to be injected) as parameters to the build pipeline and have them replaced at the right places.

## Injecting values during build

With Webpack, you can do this with the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). You can define arbitrary key value pairs with this plugin configuration and read this in your templates. The plugin will take care of replacing the correct value during build time.

For example, Lets look at the below `webpack.config.js`:

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // other webpack configuration
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/view/index.html',
      apiKeys: {
        google: 'GOOGLE_API_KEY',
        firebase: 'FIREBAE_API_KEY'
      }
    })
  ]
};
```

In the `HtmlWebpackPlugin` configuration, along with plugin options, we have also defined our own key value pairs `apiKeys`. Then in your template file, `index.html`, you can access this value as `htmlWebpackPlugin.options.YOUR_KEY_NAME`. For example,

```html
<!doctype html>
<html>
  <head>
    ...
    <script type="text/javascript">
      <script type="text/javascript">
      window.RESOURCES = {
        GOOGLE_API_KEY: "<%= htmlWebpackPlugin.options.apiKeys.google %>",
        FIREBAE_API_KEY: "<%= htmlWebpackPlugin.options.apiKeys.firebase %>",
      };
    </script>
    </script>
    ...
  </head>
  ...
</html>
```

In the above example, I read the build time values and set them into `window` scope so that I can access it anywhere in my script.

## Providing environment specific values to build pipeline

With above setup, we moved the hardcoded API keys from code layer to build layer. But the values are still hardcoded. How can we avoid that?

By setting the values as Environment variables and letting node read and supply it to us with `process.env`. Let's change our `HtmlWebpackPlugin` configuration a little bit:

```javascript
plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/view/index.html',
      apiKeys: {
        google: process.env.GOOGLE_API_KEY,
        firebase: process.env.FIREBASE_API_KEY
      }
    })
  ]
```

With this, all you have to do is to set the correct environment variables in the machine, thus completely avoiding the hardcoded values in our code base.

If you want to supply different API keys for different environments, you can either pass in the values in command line when you invoke the build script or if you have a CI pipeline, define the environment values in the prod / dev build jobs.

As an alternative to setting up environment variables, you can also use the module [dotenv](https://www.npmjs.com/package/dotenv) to define the variables as a dot file in your project's root folder. But remeber NOT to commit the dot file in Git, as it allows each system to supply it's own environment variables.

So, that's it. What do you think about this approach? Please let me know in the comment section.


How to inject environment values in JavaScript app with Webpack


Loading time is one of the key metric for any web application these days. There are several optimization techniques exist to help with reducing page load time. If you are using [Webpack](https://webpack.js.org/), you can make use of tools that come in-built to improve page loading time.

In this article, we are going to see how to do code splitting using webpack. Let's start!

## What we are building?

We are building an imaginary web application, with a landing page and button. When the user clicks on the button, we are going to load a dynamic form. In real word, this form could be your big application.

![Loading a dynamic form](https://i.imgur.com/eXVVswt.gif)

The problem here is, the form we are loading could be huge. We need to show this form only when the user clicks on the button.

But, Without code splitting, we are loading the entire bundle, even for the user's who may not even click the button. That's bad!

![Bundle size without optimization is huge](https://i.imgur.com/8qGUM9P.png)

So, let's optimize this: let's split landing page bundle and form bundle, and load the form bundle only when the user clicks on the button.

## Setting up Webpack

First, we need a project and a working webpack setup. To do this, run the below commands in one of your working directory.

```text
$ mkdir codepslit
$ cd codesplit
$ npm init
$ npm install lodash
$ npm install webpack webpack-dev-server -D
```

Once the dependencies are installed, open this project in any of your favorite IDE (I used IntelliJ). Now create folders `src` and `dist` that will be our source and output folders. Also, create a file named `webpack.config.js` in the root of your project. Finally, your structure will look something like this:

![Directory Structure](https://i.imgur.com/l5jQvHo.png)

Now, use the following webpack configuration to get our project built through webpack.

### webpack.config.js

```javascript
const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: 'dist'
    }
};
```

With this simple configuration, webpack takes the source files from `./src/index.js` and outputs them to `dist` folder. Now, lets create two files: `index.js` - our landing page and `form.js` - our dynamically loaded form.

### src/index.js

```javascript
// statically import form module.
import form from "./form";

window.onload = function () {
    let btn = document.getElementById('load');
    btn.addEventListener('click', function () {
        document.getElementById('form').appendChild(form.render());
    });
};
```

In our landing page, we are statically importing `form.js` on load itself and attaching an event to the button. When the button is clicked, we are rendering the form contents to our page (Note: for simplicity, I am using methods like `appendChild` to create dynamic elements on page. For production, you should consider frameworks such as React, Vue which are really good at UI construction).

### src/form.js

```javascript
import _ from "lodash";

export default {
    render: function () {
        let form = document.createElement('form');
        _.map(['Name', 'Email', 'Contact'], function (field) {
            let lbl = document.createElement('label');
            lbl.innerHTML = field;
            let txt = document.createElement('input');
            txt.type = 'text';
            let container = document.createElement('div');
            container.className = 'field';
            container.appendChild(lbl);
            container.appendChild(txt);
            form.appendChild(container);
        });
        return form;
    }
};
```

Our imaginary application `form.js` is very simple: It constructs three form fields dynamically and returns them. Again, don't use `appendChild` or `createElement` to construct dynamic UI in production code. Use any frameworks.

### dist/index.html

```html
<body>
    <div class="app-loader">
        <h1>User Registration Form</h1>
        <button id="load">Load Form</button>
    </div>
    <div id="form"></div>
    <script src="/bundle.js"></script>
</body>
```

Above is the HTML file that houses our application. For brevity, the style part is stripped out.

With all the above files created, the final directory structure will look like this:

![Final Directory Structure](https://i.imgur.com/AJUxx6x.png)

## Bundling our project

Now when you run `webpack`, you will webpack is emitting one single bundle that has both our `index.js` and `form.js`. And this single bundle weighs **545 KB** which is bad and webpack itself complains about it via the comment **[big]**.

![Pre bundle size](https://i.imgur.com/qk6VqMQ.png)

## Code splitting using Dynamic imports

Webpack supports dynamic imports via `import()`. With this, webpack will be able to dynamically load a bundle at run time. But in order to use this, we need to setup [babel](https://babeljs.io/) first, as dynamic imports syntax is not supported out of the box now. We also need [Syntax Dynamic Import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) babel plugin.

### 1. Install Babel and Configure webpack to use babel loader for JS files.

```text
npm install --save-dev babel-loader babel-core babel-plugin-syntax-dynamic-import
```

```javascript
/* add to webpack.config.js */
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}
```
### 2. Configure Babel to use Syntax Dynamic Import

Add a `.babelrc` file at the root of your project.

```javascript
{
  "plugins" : ["syntax-dynamic-import"]
}
```

Once you have babel setup, now it's time to setup webpack to use dynamic imports. To do this, let tell webpack to emit named chunks. Modify the `entry` and `output` options in `webpack.config.js` as below:

```javascript
entry: {
    index: "./src/index.js"
},
output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
},
```

And modify our landing page `index.js` to use dynamic imports instead of static import.

```javascript
window.onload = function () {
    let btn = document.getElementById('load');
    btn.addEventListener('click', function () {
        // dynamically import form module at run time.
        import(/* webpackChunkName: "form" */ './form').then(function (form) {
            document.getElementById('form').appendChild(form.default.render());
        });
    });
};
```

Notice that we have removed `import form from "./form.js"` line and moved it inside the event handler function of our button. We dynamically import this module via `import(/* webpackChunkName: "form" */ './form')` statement. This will return a `Promise` which will receive the dynamically loaded module as its param once its resolved. Inside the Promise callback, you can use the dynamically loaded module anyway you want.

> Note: You need to access your exported values from the dynamically loaded module as `module.default` (earlier, it was just `module`). Also, in `index.html`, load your modules as `/index.bundle.js`, instead of `/bundle.js`.

With this setup, now if you run `webpack`, you will see webpack generated two modules `index.bundle.js` and `form.bundle.js`.

![Code split bundles](https://i.imgur.com/GKmZFz9.png)

And, if you notice, now our landing page `index.bundle.js` size is only **6.14 KB**, which is a great reduction from the original size of **546 KB**. Since we will load only the `index.bundle.js` upon page load, our app will be very fast on the initial load. Hurrah!

To prove this, let's measure our app performance with [Lighthous](https://developers.google.com/web/tools/lighthouse/) for both pre and post optimization.

![Comparing page load time](https://i.imgur.com/M136MaD.png)

As you can see, with this simple setup, we are saving around **700ms** of page load time. Our site loads and become interactive faster, which is a win! 🎉


Webpack code splitting example


When I do the web development, my IDE and the browser windows occupies almost all my screen. I hardly have any space to keep my terminals that runs the webpack compilation script in background. So I keep these terminals either minimized or hidden.

My habit is to check if the webpack compiled my changes by constantly tabbing between IDE and terminals. But this is annoying and not effective.

So here's a little trick that I added to my webpack configuration that announces the compilation is done by saying 'done', thus saving me from constant tabbing.

Create a file named `webpack.announcer.plugin.js` in your project.

```javascript
/* webpack.announcer.plugin.js */
const exec = require('child_process').exec;
const voice = 'Agnes';
const message = 'done';
const doneSound = `say -v ${voice} "${message}"`; // MacOS.
// const doneSound = `echo ${message} | ptts`;  // windows.

function AnnouncerPlugin(options) {
   // customize.
}

AnnouncerPlugin.prototype.apply = (compiler) => {
    compiler.plugin('done', () => {
        exec(doneSound);
    });
};
module.exports = AnnouncerPlugin;
```

Include the above plugin in your webpack config (Eg; `webpack.dev.config.js`);

```javascript
/* webpack.dev.config.js */
let WebpackAnnouncerPlugin = require('./webpack.announcer.plugin.js');
module.exports = {
   /*  other configuration */
   plugins: [
       new WebpackAnnouncerPlugin()
   ]
}
```

done!
```


Webpack tip to play sound on successful compilation


I hope I don't need to introduce you to [Webpack](https://webpack.github.io/). By this time, you would have read through the [webpack documentation](http://webpack.github.io/docs/) and figured out that the page is for the NASA people. However, I would like to start with this Gem:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">1. have an exciting app idea<br/>2. create project folder<br/>3. include WebPack<br/><br/>…<br/><br/>47. lose all passion for project and give up<br/><br/>GOTO 1</p>&mdash; I Am Devloper (@iamdevloper) <a href="https://twitter.com/iamdevloper/status/702464176954875904">February 24, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

So, here's a very, very basic setup of Webpack to help you get started. I will keep this article as simple as I can. Also I assume that you know the basics of NPM and have installed Node in your machine.

## 0. Our Goal

We are going to create a simple setup that will have the following structure:

```text
app
|--src
|   |--js
|   |   `--main.js
|   `--scss
|       `--main.scss
|--resources
|   `--js
|       `--bundle.js
|--package.json
`--index.html
```

Go ahead and create those files in your favorite editor (except the *bundle.js*). We will have the webpack to:

1. bundle our JavaScript files from *src* folder and generate the output to *resources/js/bundle.js* file.
2. Compile *.scss* file to *.css* file and bundle it with our JS file.
3. Have a auto reloading mechanism that auto refresh the browser as you make changes to your JavaScript / Sass files.

## 1. Installing Webpack and bundling JavaScript

First, lets add some test code to the *src\js\main.js* file.

```javascript
console.log('Hello Webpack');
```

You need to run `npm install webpack -g` (to have the webpack command available globally). Also, it is better to install it as a dev dependency too. So run `npm install webpack --save-dev`.

Now that you have webpack installed, it's time to tell it what to do. We do this via a configuration file. Create a file called *webpack.config.js* in the root folder and add the following content in it.

```javascript
/* webpack.config.js */
module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    }
}
```

The configuration tells webpack:

1. What is our starting point: **entry**
2. Where to generate the bundled file: **output.path / output.filename**
3. What's the path that browsers will ues to load the bundled file: **output.publicPath**. This is important to have the auto reload work properly when we use _webpack-dev-server_.

Now if you run `webpack` in your command line, you will see that the JavaScript file is getting bundled and the output is generated in *resources/js/bundle.js* file.

## 2. Compiling SASS files

Let's setup SASS compilation. In your *src\sass\main.scss* add some test SASS code.

```sass
body {
    background-color: #f00;
}
```

To enable SASS compilation, we need to install loaders which will be used by webpack. Run `npm install style-loader css-loader sass-loader --save-dev`.

Next, you need to update *webpack.config.js* file, instructing webpack to use the loaders. The final content of webpack configuration will be:

```javascript
module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
}
```

Take a look at the `module.loaders` configuration. We are adding a new loader that *tests* for the *.scss* extension and for the matching files, uses a **series of transformation** (from right to left) sass -> css -> style.

Now update *src\js\main.js* to include the SASS file.

```javascript
require('../scss/main.scss');
console.log('Hello Webpack');
```

Now if you run `webpack`, you will see that the SASS file is converted and bundled together with our JS files into *resources/js/bundle.js*.

## 3. Serving and Auto reloading changes.

We need a web server that serves our file. Webpack provides one. Install it with `npm install webpack-dev-server -g` (to have the command available globally) and `npm install webpack-dev-server --save-dev` to define a dev dependency in your *package.json*.

Add below content to the *index.html* file to load our bundled file (omitting boilerplate code for brevity)

```html
<html>
    <body>
        <h1>Hello World</h1>
        <script type="text/javascript" src="resources/js/bundle.js"></script>
    </body>
</html>
```

Now run `webpackdev-server --inline`. The parameter `--inline` instruct the webpack server to auto reload changes. Without it, it will just serve the files.

Now open this url in a browser: [http://localhost:8080/](http://localhost:8080/) and you will see the text **Hello World** in a red color background. Now update any of the *main.scss* or *main.js* and you will see the changes are reflected immediately.

Happy Webpacking!
```


#webpack (4)