# First look at webpack ~ AoaH Eleven

Adventures of a Hobbyist (11 Part Series)

# 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 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.

# webpack-exercise

A quick exercise to learn webpack

## 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

"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

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<body>
<h1>Hello, Webpack!</h1>
<p> This is version: <%= htmlWebpackPlugin.options.packageVer %>
</p>
</body>
</html>


Then in the config.js

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.

🦄❤🦄🦄❤

Adventures of a Hobbyist (11 Part Series)

Posted on Nov 19 '18 by:

### Andrew Bone

A British Front-end developer, that is passionate about web accessibility.