Pusher Logo

    Getting started with webpack - Part 9: Webpack and Vue.js from scratch

    You will need Node 6.11.5+ installed on your machine.

    Introduction

    In this tutorial, we will see how to set up some popular JavaScript frameworks using webpack. Many JavaScript libraries, like Vue and React, come with CLI tools that help you get started pretty quickly. However, these CLI tools usually abstract away all the logic and make it seem as though it is magic. We will attempt to set up our libraries from scratch without using the CLI tools.

    In the previous tutorial we learned how to create our very own custom plugins. Even though we may never need to create plugins as there are already many plugins that probably do what you want to do already, it was good to learn how to.

    A quick reminder

    Before we get started, please note that we are not recommending any way of setting up the libraries. This article is designed to show you in examples how you can use webpack. You should decide to use CLI tools or manual depending on the project and the level of customization you want to have.

    Now, that that’s out of the way, let’s get started.

    Source code of the application is available on GitHub.

    Prerequisites

    To follow along in this series, you need the following requirements:

    • Completed all previous parts of the series.
    • Basic knowledge of JavaScript.
    • Basic knowledge of the CLI.
    • A text editor. VS Code is recommended.
    • Node.js (>= 6.11.5) and npm installed locally.

    Let’s continue with the series.

    Starting from scratch

    If you have ever created a new Vue project, you will very likely have used the vue-cli tool. This tool greatly simplifies how long it takes to set up new projects. With a single command:

        $ npm install -g @vue/cli

    You can install vue-cli and after that, you can start creating projects by simply running the command:

        $ vue create project-name

    However, we will be setting up a Vue application from scratch using webpack.

    Getting started

    The first thing you need to do is create a new project directory. This directory will be where all our project files will reside. After creating the directory, launch your terminal application, cd to the project root and run the following command:

        $ npm init -y

    This command will initialize npm in the project and add a new package.json file that we can use to define dependencies and more.

    Next, let’s install Vue by running the following command:

        $ npm install --save vue

    When that is complete, run the next command to install webpack and webpack-cli:

        $ npm install --save-dev webpack webpack-cli

    When webpack and webpack-cli have been installed, let’s start creating our application files.

    In the root of the application, create a src directory. Create a new App.vue file and inside paste the following code:

        <!-- File: ./src/App.vue -->
    <template>
      <div>
        <h1>Hello World!</h1>
      </div>
    </template>

    Next, create a new index.html file in the root of application and paste the following code into it:

        <!-- File: ./index.html -->
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Vue and Webpack</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="dist/main.js" type="text/javascript"></script>
      </body>
    </html>

    Next, create a new file inside the src directory named app.js and paste the following into it:

        // File: ./src/app.js
    import Vue from 'vue';
    import App from './App.vue';
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });

    The file above will be the entry point to the application and we are making it load the App.vue file. However, we need to bundle the files using webpack.

    Bundling our application with webpack

    The next thing we want to do is bundle the application using webpack. Create a new webpack configuration file in the root of the project and paste the following into the file:

        // File: ./webpack.config.js
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    const env = process.env.NODE_ENV;
    
    module.exports = {
      mode: env == 'production' || env == 'none' ? env : 'development',
      entry: ['./src/app.js'],
      module: {
        rules: [
          {
            test: /\.vue$/,
            use: 'vue-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader'
          },
          {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader']
          }
        ]
      },
      plugins: [new VueLoaderPlugin()]
    };

    In the code above, we are importing vue-loader which helps us parse .vue files. We also registered the VueLoaderPlugin.

    Next, let’s install the additional dependencies we defined in the webpack configuration file. To do this, run the following command:

        $ npm i vue-loader vue-template-compiler vue-style-loader css-loader babel-loader @babel/core @babel/preset-env -D

    When the installation is complete, add a new build script to the package.json file as seen below:

        // File: ./package.json
    {
      // [...]
      
      "scripts": {
        "build": "webpack"
      },
    
      // [...]
    }

    Next, run the build script using the command below:

        $ npm run build

    webpack-9-1

    When the build is complete, you should see a new dist directory containing the compiled code. If you launch the index.html file in your browser you should see your application:

    webpack-9-2

    Improving our webpack bundling

    Although our build above works, we can definitely do better. Let’s do some additional configuration that will get us closer to an actual development environment. First, we will install the webpack dev server. This will remove the need for us to manually launch the index.html file.

    In your terminal, run the following command:

        $ npm i webpack-dev-server -D

    Next, in your package.json file, add the following build script:

        // File: ./package.json
    {
      // [...]
      
      "scripts": {
      
        // [...]
    
        "dev": "webpack-dev-server"
      }
      
      // [...]
    }

    Now when we run the dev script and visit http://localhost:8080, we should see the same output as above. However, when we change the contents of the App.vue the changes are not reflected immediately. To add hot reload, let’s make a few changes.

    Open the index.html file and remove the reference to the main script dist/main.js. We want this to be automatically injected.

    Next, run the following command to install some additional dependencies:

        $ npm i html-webpack-plugin -D

    When the installation is complete, open the webpack configuration file and import the plugin as seen below:

        // File: ./webpack.config.js
    // [...]
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      // [...]
      
      plugins: [
        // [...]
        
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
      ]
    };

    Now, to add some hot reloading to the application, in the same file, update as seen below:

        // File: ./webpack.config.js
    // [...]
    const webpack = require('webpack');
    
    module.exports = {
      // [...]
      
      devServer: {
        hot: true,
        watchOptions: {
          poll: true
        }
      },
      
      // [...]
    
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        
        // [...]
      ]
    };

    Now we can re-run the dev script and we will see true hot reloading whenever we change files like the App.vue file.

    Adding styles and other components

    Right now, we only have the App.vue component and no style. Let’s fix that. Create a new file src/components/HelloWorld.vue and paste the following code into the file:

        <-- File: ./src/components/HelloWorld.vue -->
    <template>
      <div class="container">
        <h1>{{ message }}</h1>
      </div>
    </template>
    
    <style scoped>
    .container {
      margin: 0 auto;
      padding: 0 16px;
      max-width: 1200px;
    }
    .container h1 {
      color: #2a2a55;
      text-align: center;
    }
    </style>
    
    <script>
    export default {
      data: () => ({
        message: "Hello World!"
      })
    };
    </script>

    Next, replace the contents of the App.vue file with the following code:

        <!-- File: ./src/App.vue -->
    <template>
      <div id="app">
        <hello-world></hello-world>
      </div>
    </template>

    Lastly, in the src/app.js file, let’s register the component we just created. Add the following code before the main Vue instance is created:

        // File: ./src/app.js
    // [...]
    
    Vue.component('hello-world', require('./components/HelloWorld.vue').default);
    
    // [...]

    Now, run the dev script (if it was not already running) and visit http://localhost:8080. You should see the new styled application.

    webpack-9-3

    There are many other additions we can add but at this point, we have a fully working Vue application that we have built from scratch. No magic behind-the-scenes configuration.

    Conclusion

    In this part of the series, we have managed to configure our Vue application from scratch using webpack and without the help of the vue-cli tool. Depending on your project, however, you might want to stick with vue-cli as it is a lot easier to set up.

    In the final part of the series, we will configure React, another popular JavaScript library, from scratch.

    The source code to the application built in this series is available on GitHub.

    JavaScript Node.js Webpack Vue.js

    27 February 2019

    by Neo Ighodaro