First look at webpack ~ AoaH Eleven

Andrew Bone - Nov 19 '18 -

- Dev Community

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.

ignis-pwa / webpack-exercise

A quick exercise to learn webpack

webpack-exercise

A quick exercise to learn webpack

View on GitHub

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

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.

🦄❤🦄🦄❤

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .