AppDividend
Latest Code Tutorials

How To Setup Vue js With Webpack 4 Example From Scratch

Webpack 4 is out now, and it has some functional changes in this version, like zero configuration as parceljs come up with that first. If you are new to webpack 4, you can check out my  Webpack 4 Tutorial With ExampleFirst, we will see how we will install the necessary dependencies and then configure the Vue js with webpack.

Setup Vue js With Webpack 4

First of all, create the project folder and then go into it. Next, open the terminal or CMD and type the following command. You need to have node.js on your machine.

npm init

It will create a package.json file in the root folder. Okay, so now we need to install the following dev dependencies.

npm install webpack webpack-dev-server webpack-cli -D

webpack-dev-server will help us build the node server, and on that, we can host our development application.

After that, create a new folder in the root called src and in that folder, make one file called index.js.

An index.js is the file, which webpack will compiler and included in our HTML page. Speaking of HTML, let us create an index.html file inside the root folder.

<!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>Setup Vue.js with Webpack 4</title>
</head>
<body>
   <div id="app"></div>
   <script src="main.js"></script>
</body>
</html>

Here, we have included the main.js script and not included index.js because webpack 4 generates the by default main.js file as an output of webpack bundles. However, we can change it manually by defining the output object inside the webpack.config.js file. This included zero-configuration in webpack 4. So if you do not want to set entry and the file’s output, then webpack will look for the src folder and in that index.js file and output as a main.js bundle file.

Install babel dependencies.

We are using an ES6 code, so we need to transpile the ES6 code into ES5. In this process, we need the babel-loader, so first, let us install that.

npm install babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 -D

It installs as a development dependency.

Create webpack.config.js file.

In the root of the project, we need to create the webpack.config.js file. In this file, we can define the loaders and plugins that can support the other languages that need to be compiled in Javascript.

// webpack.config.js

module.exports = {
   module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
   }
}

As we have discussed earlier, we do not need an entry and output object in webpack 4. Also, we need to define the .babelrc file in the root.

{
   "presets": ["es2015", "stage-0"]
}

Install vue.js

Go to the terminal and type the following.

npm install vue --save

Also, we need to install the following dev dependencies for .vue file and template support.

npm install vue-loader vue-template-compiler -D

Okay, after that remaining configuration is defined as the loader inside a webpack.config.js file. I am here writing the final webpack.config.js file.

// webpack.config.js

const path = require('path');

module.exports = {
   module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
         test: /\.vue$/,
         loader: 'vue-loader'
       }
      ]
   },
   resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
}

Write the Vue component.

Inside the src folder, make one new folder called components and inside that folder, create one component called AppComponent.vue file.

// AppComponent.vue

<template>
   <h1>Hello from the AppComponent</h1>
</template>
<script>
   export default {

   }
</script>

Now, import this component inside src  >>  index.js file.

// index.js

import Vue from 'vue'
import AppComponent from './components/AppComponent.vue'

new Vue({
   render: h => h(AppComponent)
 }).$mount('#app')

Start the webpack development server.

Okay, now everything is set. Just need to start the server but before that, we need to add the scripts inside a package.json file.

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "prod": "webpack --mode production"
},

We are right now dealing with development mode, so lets hit the command to bootstrap the server.

npm run dev

Now, you can see that our Vue js app is running on port: 8080.

So finally, this is the easy webpack configuration with Vue js. Setup Vue js With Webpack 4 Example From Scratch is over.

Fork Me On Github

 

2 Comments
  1. Byungsung Min says

    Hello, Krunal.

    The webpack.config.js file has been missed something about plugin configurations.

    Here working configuration based on yours

    ‘use strict’

    const path = require(‘path’)
    const { VueLoaderPlugin } = require(‘vue-loader’)

    module.exports = {
    module: {
    rules: [
    {
    test: /\.vue$/,
    loader: ‘vue-loader’
    },
    {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
    loader: ‘babel-loader’
    }
    },
    ]
    },
    resolve: {
    alias: {
    ‘vue$’: ‘vue/dist/vue.esm.js’
    },
    extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]
    },
    plugins: [
    new VueLoaderPlugin()
    ]
    }

  2. Akash says

    const path = require(‘path’);

    const {VueLoaderPlugin} = require(‘vue-loader’)

    module.exports = {
    module: {
    rules: [
    {
    test: /.js$/,
    exclude: /node_modules/,
    use: {
    loader: ‘babel-loader’
    }
    }, {
    test: /.vue$/,
    loader: ‘vue-loader’
    }
    ]
    },
    resolve: {
    alias: {
    ‘vue$’: ‘vue/dist/vue.esm.js’
    },
    extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]
    },
    plugins: [new VueLoaderPlugin()],
    devServer: {
    contentBase: “./src”,
    // hot: true
    }
    }

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.