My Journey to Setting Up Vue.js and Webpack From Scratch: Part 1
This article isn’t a tutorial but a documentation of the steps I took in creating a very basic Vue.js boilerplate using Webpack for bundling.

Goal
To create a basic Vue.js application and configure Webpack to output a Vue component to the web browser.
Pre-requisites
Tools
- Visual Studio Code
- Terminal
Step 1 — Initial setup
Create an empty project folder boilerplate-vue. This will be the root of the application.
Create a package.json file within the application root by running:
npm initpackage.json file after intial setup:
{
"name": "boilerplate-vue",
"version": "0.1.0",
"description": "Vue.js boilerplate",
"author": "Kenny Tran",
"private": true
}Step 2 — Install dependencies
Install the latest stable version of Vue.js via NPM as a dependency:
npm install vueInstall the following packages as devDependencies:
npm install --save-dev vue-loader vue-template-compiler webpack webpack-cliStep 3 — Create distribution folder and files
The dist folder will hold all the files that is needed to serve the application to the web browser.
The application will consist of two files, an index.html file which I will create manually and a bundle.js file which will be generated by Webpack.
- Create
distfolder within the project root and createindex.htmlwithin it.
boilerplate-vue
|-- dist
|-- index.html2. Add the following HTML into index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boilerplate Vue</title>
<body>
<div id="app"></div>
<script src="bundle.js" type="text/javascript"></script>
</body>
</html>Note: <div id="app"></div> will be the root DOM element of the app and will be where we render the app.
Note: I’m including the bundle.js which at the moment doesn’t exist but will be generated later on by Webpack.
Step 4 — Create source folder and files
The src folder will hold all the logic for the app. The idea is to configure Webpack to take all the files within src and bundle it all into main.js.
- Create the
srcfolder within the project root and createindex.jsandApp.vuefiles within it.
boilerplate-vue
|-- src
|-- main.js
|-- App.vue2. App.vue will be the root component of the app. Add the following snippet into App.vue. I’ve kept the component as simple as possible for now.
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>3. Themain.js file will be the entry point of the application. Add the following snippet into main.js.
import Vue from 'vue'
import App from './App.vue'new Vue({
el: '#app',
render: h => h(App)
})
Breakdown:
Import the Vue.js core and the Vue component created earlier
import Vue from 'vue'
import App from './App.vue'Create a new Vue instance and tell it to render the component App to the DOM element with the id of app (which was created earlier in the index.html file)
new Vue({
el: '#app',
render: h => h(App)
})h => h(App) is a common Vue.js convention and is a shorthand for:
render: function(createElement) {
return createElement(App);
}Step 5 — Configure Webpack
As mentioned above, I’ll be using Webpack to bundle all our app files and serve them to the web browser as a single bundle.js file.
First Webpack needs to be configured so it knows what to do with the files.
- Create the file
webpack.config.development.jswithin the project root
boilerplate-vue
|-- webpack.config.development.js2. Add the following into webpack.config.development.js:
'use strict'const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
mode: 'development', entry: [
'./src/main.js'
], output: {
filename: 'bundle.js'
}, module: {
rules: [{
test: /\.vue$/,
use: 'vue-loader'
}]
}, plugins: [
new VueLoaderPlugin()
]
}
Breakdown:
mode tells Webpack how to optimise the app.
entry defines the point or points to enter the application.
output defines how and where it should output the bundles
module defines the different types of modules to be used. This is where we intercept dependencies and preprocess them before they get bundled
rules target specific files and run processes on them before they get bundled.
plugins defines any plugins to modify or add capabilities to Webpack
We target all .vue files and run the vue-loader module on them, which allows us to author Vue components in a format called Single-File Components:
test: /\.vue$/,
use: 'vue-loader'vue-loader v15 requires the vue-loader plugin to work:
const VueLoaderPlugin = require('vue-loader/lib/plugin')...new VueLoaderPlugin()
Step 6 — Run Webpack
Typically a local version of Webpack is run via npm scripts within package.json which will automatically look for Webpack in thenode_modules directory.
- Add the following to
package.json:
"scripts": {
"dev": "webpack --config webpack.config.development.js"
}Breakdown
"scripts" is where to define all npm scripts to be run.
"dev" name of the script
webpack this is the command to execute Webpack.
--config webpack.config.development.js defines the configuration file to use when executing Webpack.
2. To run dev:
npm run devStep 7 — Result
Webpack will now have bundled all the code in src and generate bundle.js in dist.
To test, visit the application within the local web server at http://localhost/boilerplate-vue/dist/.

