js extension excluding everything in the node_modules folder, while the second rule tells webpack to apply the vue loader to any file with a. In the code above we see a module option where we define some rules, the first rule tells webpack to use babel loader to transpile all files having a. You can read more about VueLoaderPlugin here. Our package.json file should look like this after the installation processĮnter fullscreen mode Exit fullscreen modeįrom the code above we import VueLoaderPlugin from vue-loader and the path module which we will be using to configure our entry and output point so webpack will know where to start compiling from and where to put our compiled code after compiling. Run npm install webpack webpack-cli webpack-dev-server babel-loader vue-loader vue-template-compiler -D this would install all these packages as dev-dependencies. Dev-dependencies: Now we install webpack, webpack-cli, webpack-dev-server, babel-loader, vue-loader, vue-template-compiler.Run npm install vue vue-router core-js -save this would install the three packages as dependencies. Dependencies: first we install vue, vue-router and core-js as dependencies.

Now that we have a package.json file to keep track of our dependencies, we can go ahead to install them. In the file you created, run the command npm init –y to create a package.json file In your terminal, use the mkdir command to create a project folder and use the cd command to change directory into the folder created. You’ll need to have node installed on your computer, you’ll also need a basic knowledge of how vue works, and of course a code editor.Ĭreating a folder and a package json fileĬonfigure webpack to use babel loader, and vue loaderįinal webpack configuration and Observation This post gives a step by step guide to setting up vue.js using webpack.

Webpack dev server pug template