First look at webpack ~ AoaH Eleven
Tags: webpack, learning, node, opensource
Published: 2018-11-19 14:15:38

---
title: First look at webpack ~ AoaH Eleven
published: true
description: Having a quick gander at webpack.
tags: webpack, learning, node, opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oqnqf0xsd2orma2832bb.png
series: Adventures of a Hobbyist 
---

# First look at webpack ~ AoaH Eleven

## Welcome

Hello and welcome another blog post, this week I've decided to learn how to use webpack, though I'm sure I will only scratch the surface of what's possible. If this is your first time reading one of my blogs feel free to have a look at the [index page](https://dev.to/link2twenty/adventures-of-a-hobbyist--index-4oj7) to see older posts.

It had been my intention to start a new larger project this week but that didn't go according to plan. I wanted to use Polymer Web Components but they're written in such a way that you need to run a build to use them and I knew nothing about building projects. Which leads us here.

## Why webpack?

Webpack seems to be the most widely used package. I don't really have any reason other than that, I think it's good to learn with something to get your head around the concepts and then you can apply what you've learned to any package, even if the syntax is a little different.

## What did you make?

Well, it was my first project, so naturally, I made a simple `hello world` program. It generates an HTML page, from a template, that displays the package version and runs some javascript, which is bundles from two different files.

There are two run commands `npm run dev-build` and `npm run build` which do a development or production build respectively.

### Is it really worth making a git for that?

Probably not, but I did and it's here.

{% github ignis-pwa/webpack-exercise%}


## How did you make it?

First thing's first I initialised the project and added the dependencies I wanted to use.

```
npm init
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev html-webpack-plugin

```
I then created `webpack.config.js` and `production.config.js` to store the config for the two different build processes. 

Finally, I added the commands to my `package.json` so I could call the build processes

```javascript
"scripts": {
  "build": "webpack --config production.config.js",
  "dev-build": "webpack --config webpack.config.js"
}
```
Of course, I had to write a template file and my javascript too. 

### Show the code!

I think only the template stuff is interesting, I'm sure you all know what javascript imports look like.

`.\src\templates\index.hmtl`
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>
      <%= htmlWebpackPlugin.options.title %>
    </title>
  </head>
  <body>
    <h1>Hello, Webpack!</h1>
    <p> This is version: <%= htmlWebpackPlugin.options.packageVer %>
    </p>
  </body>
</html>
```
Then in the `config.js`

```javascript
plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src/templates/index.html"),
    title: package.description,
    packageVer: package.version
  })
]
```

After the build has happened a version of `index.html` will appear `.\build\`. If you'd like to look through my code fully feel free to head over to the git.


## End of post

Thank you for, once again, reading my ramblings. Hopefully armed with this knowledge I'll be able to build with `polymer` so I can start my next project. It's called `project libratuari` and, as always, I'll write up my experiences here on dev.to.

Thanks again.


🦄❤🦄🦄❤