Webpack based starterkit for quick web explorations

Posted on October 26, 2019 in
4 min read

My current and favorite stack in web development is based on Vue.js with its CLI.

Nevertheless, for simple coding explorations I find it a little overkill. Furthermore, I like to test other possibilities in the field from time to time.

For that reason, I've explored Webpack a bit and this post tries to outline the configuration I've set up for my needs.

If you want to benefit from one of more of the following features:

ES6 modules and async/await
Loaders for CSS, SVG, CSV and images
Hot replacement webserver for development
Static and external files handled properly

You're welcomed to test my configuration and continue to read as well :)

Some code snippets for a fast start

ES6 modules

I want to write encapsulated and reusable js modules without worry about global scope pollution and nested dependencies.

Create a .js file in src folder, src/mod1.js with

export default {
  some: 'object'
}

Create a secondary .js file in src folder, src/mod2.js with

export default {
  some: 'other object'
}

Load them from within index.js:

import mod1 from './mod1.js'
import mod2 from './mod2.js'

console.log(mod1, mod2)

ES6 async/await

I want to use the async/await sugar syntax to escape the callback hell and exploit the cleaner procedural syntax as well.

Create src/modasync.js file with:

export default () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hey!')
    }, 2000)
  })
}

Load it from within index.js:

import mod from './modasync.js'

const init = async () => {
  const v = await mod()
  console.log(v)
}

init()

Since there is not async in the root scope, we need to wrap the main code in an async function.

ES6 async/await with fetch

I want to do the same when fetching external API. Here an example with fetch, put this code in the index.js:

const url = 'https://jsonplaceholder.typicode.com/todos/1'

const init = async () => {
  const response = await fetch(url)
  const json = await response.json()
  console.log(json)
}

init()

Another example with multiple fetches in sequence, a nice way to avoid the callback hell:

const base = 'https://jsonplaceholder.typicode.com/'
const todos = 'todos'
const posts = 'posts'
const photos = 'photos'

const init = async () => {
  const promises = [fetch(base + todos), fetch(base + posts), fetch(base + photos)]

  const all = await Promise.all(promises)

  all.forEach(async response => {
    const json = await response.json()
    console.log(json)
  })
}

init()

CSS

I want to inject my CSS files into the build.

You can both include a CSS file from within the template.html and within js files as well.

From the template, assuming the external file is in /assets/external.css:

<head>
  <link rel="stylesheet" type="text/css" href="/assets/external.css" />
</head>

From the js file, the CSS needs to be within src folder such as src/style.css and put this in the index.js:

import './style.css'

External CSV/JSON files

I want to load external files at runtime, such as a CSV or a JSON file. In this snippet, let's assume the file is placed in /assets/data.csv, then use this code:

;(async () => {
  const response = await fetch('assets/data.csv')
  const data = await response.text()
  console.log(data)
})()

There's also the possibility to include (inject) external data files in the build:

import data1 from './data2.csv'
import data2 from './data.json'

console.log(data1, data2)

In this situation you need to put those files within the src folder.

Images

I want to handle images properly using the Webpack way.

Assuming the images placed within src/images folder:

import img from './images/1.png'

const myImg = new Image()
myImg.src = img

document.body.appendChild(myImg)

The above code works with the following file format:

Interested?

Go to this repository to learn more about this configuration. You can clone it to start exploring quickly.

This is meant to be a quick guide to use fast a common webpack configuration. It might be updated eventually the moment I'll need further features.

Like what? I'd like to explore more about using HTML templates and post-processor, mainly for CSS. So stay tuned!

← Invoke the upload dialog from Vue.js component

Upload on AWS S3 with Express.js and Vue.js - Part 1 →

Related:

Discover: