AppDividend
Latest Code Tutorials

How To Setup Vue js With Webpack 4 Example From Scratch

9,866

Get real time updates directly on you device, subscribe now.

In this tutorial, I have described How To Setup Vue js With Webpack 4. 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, then you can check it out my  Webpack 4 Tutorial With Example From ScratchFirst, 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. 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 to 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 main.js script and not included index.js because webpack 4 generates the by default main.js file as an output of webpack bundles although we can change it manually by defining in the output object inside the webpack.config.js file but this included in zero configuration in webpack 4. So if do not want to set entry and the output of the file then webpack will look for 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 dependencies.

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 be used to support the other languages that need to be compiled in the 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 define 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 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

 

Related Posts
1 of 14
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.