VueJS 2 and Webpack Basic Setup

This project presents a basic template with the minimum configuration that VueJS 2 and WebPack should have in the client side.

Designed by: Jengrik

Table of Contents

1. Getting Started
2. Dependencies Installation
   • VueJS
   • Webpack
   • Babel
3. General Configuration
   • VueJS App Configuration
   • Webpack Configuration File
   • Babel Configuration File
4. References

Getting Started

NPM (originally short for Node Package Manager) is a package manager for the JavaScript programming language maintained by npm, Inc.

It consists of a command line client, and an online database of public and paid-for private packages, called the npm registry.

You can initialize the package.json file using:

npm init

or quickly without dialogs as:

npm init --yes

After that, you can install packages using the install command. To achieve that, you can use:

npm install <package> <specification>

or with its abbreviation as

npm i <package> <specification>

You can control where and how they get saved with some additional flags on the specification field:

• -P, --save-prod
  Package will appear in your dependencies. This is the default unless -D or -O are present.

• -D, --save-dev
  Package will appear in your devDependencies.

• -O, --save-optional
  Package will appear in your optionalDependencies.

• --no-save
  Prevents saving to dependencies.

When you are using any of the above options to save dependencies to your package.json, there are two additional, optional flags:

• -E, --save-exact
  Prevents saving to dependencies.

• -B, --save-bundle
  Prevents saving to dependencies.

Dependencies Installation

VueJS

Since we will use VueJS as Front-End framework then we will need a Vue loader for the Single-file components in Webpack. First, you should choose the VueJS version that you will use, in this case, I will use VueJS 2.

Vue 2 has shipped a final minor release (2.7) in July 2022, which backports a selected subset of new features from Vue 3. Vue 2 has now entered maintenance mode: it will no longer ship new features but will continue to receive critical bug fixes and security updates until the end of 2023. For this reason, is highly recommended following the next configuration:

npm i vue@2.7.0 -D
npm i vue-template-compiler@2.7.0 -D

The compiler's version must be in sync with the base VueJS package so that vue-loader produces code that is compatible with the runtime. This means, every time you upgrade VueJS in your project, you should upgrade vue-template-compiler to match it as well.

Webpack

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. it will be shown how to install it using NPM.

Install the package:

npm i webpack -D

For a custom webpack project, webpack CLI provides a flexible set of commands increase speed, you can install it using:

npm i webpack-cli -D

You already have realized that is necessary generate a Webpack build each time that you made a change. You can save that time using the webpack-dev-server since it provides live reloading.

npm i webpack-dev-server -D

Additionally, vue-loader is a loader for webpack that allows you to create Vue components in a format called Single-File Components (SFCs), the last version released for VueJS 2 is the 15, you must use:

npm i vue-loader@15.9.8 -D

In a nutshell, the combination of webpack and vue-loader gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications. If you want to treat assets referenced in <style> as module dependencies then you need to handle them with webpack loaders. In this case, we will use css-loader, you could install it using:

npm i css-loader -D

Babel

Once the VueJs and its loaders has been installed, we could start thinking about babel and its integration with webpack. Babel is a tool that helps you write code in the latest version of JavaScript.

When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

To include babel in our project with Webpack, you need to include the loader babel-loader, this package allows transpiling JavaScript files.

This loader requires a small preset called babel/preset-env that allows you to use the latest JavaScript without needing to micromanage syntax. The Babel compiler core is called @babel/core. To install those packages, you should use:

npm i babel-loader @babel/core @babel/preset-env -D

General Configuration

VueJS App Configuration

In many Vue projects, global components will be defined using Vue.component, followed by new Vue({ el: '#container' }) to target a container element in the body of every page. In this case, in our JS Entry File we use:

new Vue({
    render: h => h(App)
}).$mount('#bodyVueContainer');

One important thing to note is that separation of concerns is not equal to separation of file types. In modern UI development, instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.

For that reason, we will use the basic Vue.component definition:

<template>
    <div>-- Content --</div>
</template>
<script src="./logic.js"></script>
<style src="./style.css"></style>

Webpack Configuration File

Vue Loader's configuration is a bit different from other loaders. In addition to a rule that applies vue-loader to any files with extension .vue, make sure to add Vue Loader's plugin to your webpack config.

The plugin is is responsible for cloning any other rules you have defined and applying them to the corresponding language blocks in .vue files. For example, if you have a rule matching /\.js$/, it will be applied to <script> blocks in .vue files.

The basic rules that you Webpack file need are:

rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                          ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    },
                }
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
        ]

Babel Configuration File

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

@babel/preset-env takes any target environments you've specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

You can include it in your Webpack file using:

use: {
        loader: 'babel-loader',
        options: {
            presets: [
                ['@babel/preset-env', { targets: "defaults" }]
            ]
        },
     }

When no targets are specified: Babel will assume you are targeting the oldest browsers possible. For example, @babel/preset-env will transform all ES2015-ES2020 code to be ES5 compatible.

References

This document is only a guide that aims to present the basic configuration of a simple project. The information was taken from the following sources:

• NPM
  https://docs.npmjs.com/

• VueJS 2
  https://v2.vuejs.org/v2/guide/

• Webpack 5
  https://webpack.js.org/concepts/

• Babel
  https://babeljs.io/docs/en/.