Last Updated:

Build a VueJS 2.0 project using Webpack 2.0

We'll look at how to build VueJs 2.0 components that are arranged in different files into one using Webpack 2.0. To do this, we'll create a VueJs project, create a VueJs compose, write the configuration for the Webpack, and assemble everything into a single file. And so let's get started.

I have OpenServer installed, the vue.loc virtual host is configured. Node.js version 6.3.1 installed

VueJS 2.0 project 1

npm version 4.5.0 installed

VueJS 2.0 project 2

How to install node.js and npm I will not describe. This is all well described in the documentation.

All files that are given in the article can be downloaded from the link at the end of the article.

Create a package.json file

We have an empty folder, i.e. a clean project.

 

Let's create package.json in it. To do this, open PowerShell in Windows. If you have Linux or MacOS, then open the terminal. And go to the folder with the project. Enter the command:

npm init --yes

VueJS 2.0 project 3

The file created open it for editing and paste the following code into it:

{

    "name": "vue.loc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "vue": "*",
        "vue-router": "*"
    },
    "devDependencies": {
        "webpack": "*",
        "vue-loader": "*",
        "buble": "*",
        "buble-loader": "*",
        "html-webpack-plugin": "*",
        "css-loader": "*",
        "vue-template-compiler": "*"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Save.

Installing packages via npm

Now let's install the packages. To do this, in PowerShell (in the terminal) enter the command

npm i

VueJS 2.0 project 4

Note that we run the command to install the packages in our project directory. Wait!

All packages are installed.

Now we can start creating the project.

Creating Project Files

First, we will create an index.html file with html markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    
<h1>Test</h1>


<div id="app">

    </div>

</body>
</html>

And create a file main.js is the main file.

import Vue from './node_modules/vue/dist/vue.js'

new Vue({
    el: "#app",
})

In the first line, we import vue from node_modules/vue/dist/vue.js, and then create an instance of it.

Now we need to create a VueJs component

Creating a VueJS Component

In the directory with our project, create a subdirectory of components and create a Hello.vue file in it.

<template>
    
<h2>{{ msg }}</h2>

</template>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20module.exports%20%3D%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%20'%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scope%3E%0A%20%20%20%20h2%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20green%3B%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />


The file consists of three sections: a template, a component description, and styles.

Now we need to connect only that created component to our main.js file. Open the main.js file in the editor and modify the code:

import Vue from './node_modules/vue/dist/vue.js'
import hello from './components/hello.vue'

new Vue({
    el: "#app",
    components: {
        hello: hello
    }
})

Now we need to describe the configuration for the webpack.

Webpack configuration file

Let's create a config subdirectory in the directory of our project and create a webpack.config file in it.js

module.exports = {
    module: { 
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

This configuration is required. We specify webpack through which loaders to handle our files.

Save. It remains in the package.json file to specify the script.

Script to build a VueJS project via webpack

Open the package.json file and add the "scripts" section

…

"build": "webpack --config config/webpack.config.js main.js build.js"

…

Here's what our file looks like now:

{
    "name": "vue.loc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config config/webpack.config.js main.js build.js"
    },
    "dependencies": {
        "vue": "*",
        "vue-router": "*"
    },
    "devDependencies": {
        "webpack": "*",
        "vue-loader": "*",
        "buble": "*",
        "buble-loader": "*",
        "html-webpack-plugin": "*",
        "css-loader": "*",
        "vue-template-compiler": "*"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

We are all ready to assemble our project

Building a VueJs project via webpack

Run the following command in PowerShell for Windows or Terminal for UNIX-like systems:

npm run build

VueJS 2.0 project 5

The whole project is assembled. We ended up with one build file.js

 

All that's left in the index file.html to mount the compiled file and paste the VueJs component.

To do this, change the index code.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    
<h1>Test</h1>


<div id="app">
        <hello></hello>
    </div>

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22build.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Save.

Conclusion.

 

You and I installed VueJs and Webcack via npm (and, if you noticed, without being tied to the version). Next, we created the VueJs component and placed it in a separate file. And then we set up a webpack to build VueJS (the config was put in a separate file). Assembled all the components into one file using webpack. The compiled file was connected to the html file and the VueJs component was output.