The Project | About Us | Contribute | Donations | License

HOME

In this section, we will guide you through the process of setting up a Vue.js project using Webpack. This will include creating a new Vue project, configuring Webpack, and understanding how to integrate Vue-specific tools and plugins.

Prerequisites

Before we start, ensure you have the following installed on your machine:

Node.js (v12 or higher)
npm (v6 or higher) or Yarn (v1.22 or higher)

Step 1: Create a New Vue Project

Using Vue CLI

The easiest way to set up a Vue project is by using the Vue CLI. If you don't have Vue CLI installed, you can install it globally using npm or Yarn:

npm install -g @vue/cli
# or
yarn global add @vue/cli

Once installed, create a new Vue project:

vue create my-vue-app

Follow the prompts to set up your project. For this tutorial, you can choose the default preset.

Manually Setting Up a Vue Project

If you prefer to set up the project manually, follow these steps:

Create a new directory and initialize npm:

mkdir my-vue-app
cd my-vue-app
npm init -y

Install Vue and Webpack:

npm install vue
npm install --save-dev webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler css-loader

Step 2: Project Structure

Your project structure should look like this:

my-vue-app/
├── node_modules/
├── src/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── public/
│   └── index.html
├── package.json
└── webpack.config.js

Create the `src` Directory and Files

Create the src directory and the main files:
```
mkdir src
touch src/main.js src/App.vue
```

Create a components directory and a HelloWorld.vue component:

mkdir src/components
touch src/components/HelloWorld.vue

Add Basic Vue Code

src/main.js:

import Vue from 'vue';
import App from './App.vue';

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

src/App.vue:

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
};
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

Create the `public` Directory and `index.html`

Create the public directory and index.html:
```
mkdir public
touch public/index.html
```

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Step 3: Configure Webpack

Create a webpack.config.js file in the root of your project:

touch webpack.config.js

Add the following configuration:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 9000,
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
};

Step 4: Add Scripts to `package.json`

Update your package.json to include build and start scripts:

"scripts": {
  "serve": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Step 5: Run the Development Server

Start the development server:

npm run serve

Open your browser and navigate to http://localhost:9000. You should see your Vue application running.

Conclusion

In this section, you learned how to set up a Vue project using Webpack. You created a basic project structure, configured Webpack, and ran a development server. This setup provides a solid foundation for building more complex Vue applications with Webpack.

Next, you can explore more advanced configurations and optimizations to enhance your Vue project.

Setting Up a Vue Project

Prerequisites

Step 1: Create a New Vue Project

Using Vue CLI

Manually Setting Up a Vue Project

Step 2: Project Structure

Create the `src` Directory and Files

Add Basic Vue Code

Create the `public` Directory and `index.html`

Step 3: Configure Webpack

Step 4: Add Scripts to `package.json`

Step 5: Run the Development Server

Conclusion

Webpack Course

Module 1: Introduction to Webpack

Module 2: Core Concepts

Module 3: Advanced Configuration

Module 4: Development Tools

Module 5: Optimizing for Production

Module 6: Integrations and Advanced Techniques

Module 7: Real-World Projects

Module 8: Troubleshooting and Best Practices

Setting Up a Vue Project

Prerequisites

Step 1: Create a New Vue Project

Using Vue CLI

Manually Setting Up a Vue Project

Step 2: Project Structure

Create the src Directory and Files

Add Basic Vue Code

Create the public Directory and index.html

Step 3: Configure Webpack

Step 4: Add Scripts to package.json

Step 5: Run the Development Server

Conclusion

Webpack Course

Module 1: Introduction to Webpack

Module 2: Core Concepts

Module 3: Advanced Configuration

Module 4: Development Tools

Module 5: Optimizing for Production

Module 6: Integrations and Advanced Techniques

Module 7: Real-World Projects

Module 8: Troubleshooting and Best Practices

Create the `src` Directory and Files

Create the `public` Directory and `index.html`

Step 4: Add Scripts to `package.json`