How to configure Webpack and Vue from the ground up
Tags: vue, webdev, javascript, vscode
Published: 2019-07-31 12:22:16

__Hi Guys!__


Tools like the __vue-cli__, __create-react-app__ and __@angular/cli__ takes the hassle of configuring projects and application from developers. It saves a lot of time for developers to read the webpack documentation and other plugins or libraries that are needed to build these tools. We only just install it once and run it or call it in the command line and Voila, we have a preconfigured project right in front of us and we can code or program right away.

But I'm a curious guy. I wanna know how things work. So let's get down to business.

Please install __Node.js__ before doing this.
From your desktop run this command. 

```cmd
   mkdir vue-webpack && cd vue-webpack
   npm init --y
```

Basically what this means is that we are making a directory (__md__) that has a name of __vue-webpack__ and changing our current directory (__cd__) __Desktop__ to __vue-webpack__ and making a __package.json__ file with the __npm init --y__ command with the default configuration.



```cmd
   npm i -D @babel/cli @babel/core @babel/preset-env babel-loader 
   webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader 
   vue-template-compiler css-loader vue-style-loader
```

__i__ alias for __install__.
__-D__ means that we install it as a development dependency.

__@babel/cli__ and __@babel/core__ : Theses packages lets us transpile our JavaScript code in the command line or we can transpile it programmatically.

__@babel/preset-env__: This package lets us use the newest features of JavaScript mostly ES6 features and some features ES7 and ES8 in our code. If you want to use __async/await__ feature you might need the __@babel/polyfill__ library.

__babel-loader__ : Webpack needs this to transpile our Javascript Code with Babel.

__webpack__ and __webpack-cli__: The webpack core functionality and the webpack command-line utility so we can run some custom webpack commands.

__webpack-dev-server__: This provides a live development server and it reloads the browser page every time a file changes.


__html-webpack-plugin__ : This plugin generates an HTML file or we can specify an existing one to server our bundles.

__vue-loader__ and __vue-template-compiler__: We need these two so webpack can understand and transpile files that have an extension of __.vue__.

__css-loader__ and __vue-style-loader__ : We need these two so we can use __css style__ tags in our Vue files.

```cmd
  npm i -P vue
```
__-P__ means we install it a production dependency.

__vue__: We need this obviously to make Vue Apps. Duh :smiley:.




Our __index.html__ file.
![HTML File](https://thepracticaldev.s3.amazonaws.com/i/wuclzfuzm4e0ta3xyxpb.png)


Our __webpack.config.js__ file.
![Webpack Config](https://thepracticaldev.s3.amazonaws.com/i/mlsqp9b1oo73rr6x37om.png)

Ok, I'm not gonna explain all these just the important parts. We specify the __entry__ path of our main file with the help of __path.join__ method and the global variable __\__dirname__ that node provides us. We specify the output using two properties the __path__ to the folder to be created and the name bundled __filename__. And in the __devServer__ object we specify the port which in this example is __1000__ and the __open__ property to true which automatically opens the browser when we start our application and __hot__ property to true which reloads the page when we change a file in the directory. The __historyApiFallback__ property specifies that the __index.html__ file will be served instead of 404 responses. The array __rules__ property in our __module__ 
is our configuration for our loader files. In the __plugin__ property we specify plugins that we need in our application first we instantiate the __HotModuleReplacementPlugin__ so we can enable hot-reloading in our application.
The __VueLoaderPlugin__ is needed for our __vue__ files and lastly, in the __HTMLWebpackPlugin__ we pass the necessary options we specify the path to our __favicon__ if you don't have a favicon get rid of this option, the path of our __template__ file which in this case is the index.html file.


Our __app.js__ file.
![App.js](https://thepracticaldev.s3.amazonaws.com/i/7nubsh5au7z80mquay3r.png)


Btw, run this command in the root of the __vue-webpack__ folder.

```cmd
    mkdir components
```

Our __Main.vue__ file.
![Main.vue](https://thepracticaldev.s3.amazonaws.com/i/ejec2949e52ff8zpltui.png)



Our __package.json__ file.
![package.json](https://thepracticaldev.s3.amazonaws.com/i/p3fucvx325boirb8keri.png)

Run in the command line.
```cmd
   npm start
```

Great, We just made a Vue app from scratch with Webpack.

Ok, I'm gonna add the __vue-router__ plugin in our application.


Run in the command line.

```cmd
   npm i -P vue-router
```

Make new 3 vue files.

__Home.vue__,__About.vue__ and __Contact.vue__.

![Home](https://thepracticaldev.s3.amazonaws.com/i/2zf3n6oz88qpsldmlkkl.png)
![About](https://thepracticaldev.s3.amazonaws.com/i/lc4ymaq9j0c4mg407qgm.png)
![Contact](https://thepracticaldev.s3.amazonaws.com/i/52p1dr5pn2ytqb4mulad.png)



Our modified __Main.vue__ file.
![Modified Main](https://thepracticaldev.s3.amazonaws.com/i/dpu1z5u2q7n3f489cg83.png)


Make a router.js file in the root folder.
![router.js](https://thepracticaldev.s3.amazonaws.com/i/xmk18d4s63e3mbzbepsm.png)


Our modified __app.js__ file.
![Modified app.js](https://thepracticaldev.s3.amazonaws.com/i/l71ytspci5ebmw5i13as.png)

Run the __npm start__ command again.


#### Thanks for reading this post.

### Have a Nice Day Everyone :smiley:.