DEV Community

Cover image for How to configure Webpack and Vue from the ground up
Mark Abeto
Mark Abeto

Posted on • Updated on

How to configure Webpack and Vue from the ground up

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.

   mkdir vue-webpack && cd vue-webpack
   npm init --y
Enter fullscreen mode Exit fullscreen mode

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.

   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
Enter fullscreen mode Exit fullscreen mode

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.

  npm i -P vue
Enter fullscreen mode Exit fullscreen mode

-P means we install it a production dependency.

vue: We need this obviously to make Vue Apps. Duh 😃.

Our index.html file.
HTML File

Our webpack.config.js file.
Webpack Config

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

Btw, run this command in the root of the vue-webpack folder.

    mkdir components
Enter fullscreen mode Exit fullscreen mode

Our Main.vue file.
Main.vue

Our package.json file.
package.json

Run in the command line.

   npm start
Enter fullscreen mode Exit fullscreen mode

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.

   npm i -P vue-router
Enter fullscreen mode Exit fullscreen mode

Make new 3 vue files.

Home.vue,About.vue and Contact.vue.

Home
About
Contact

Our modified Main.vue file.
Modified Main

Make a router.js file in the root folder.
router.js

Our modified app.js file.
Modified app.js

Run the npm start command again.

Thanks for reading this post.

Have a Nice Day Everyone 😃.

Top comments (9)

Collapse
 
programistka profile image
Iwona Kubowicz

That is so unuseful without any code one could copy.

Collapse
 
kristijanfistrek profile image
KristijanFištrek

Dude, this is marvelous! 🤘

Collapse
 
macmacky profile image
Mark Abeto

Thanks, I'm glad that you like it.

Collapse
 
1c7 profile image
Cheng Zheng

Mind if I ask where is the Github repo for this article?
I was trying to follow it step by step and copy the code.
clearly I can't copy code from image.

Any help? Thank you

Collapse
 
natemate90 profile image
Nathan Alder

How would you manually configure webpack to use webpackChunkName in router.js , if you want automatic code splitting?

Collapse
 
rslhdyt profile image
Risal Hidayat

Thanks dude

Collapse
 
macmacky profile image
Mark Abeto

No problemo 😃!

Collapse
 
arob profile image
Abdur Rob • Edited

Very nice, neat & clean article. Great job! Thank you so much!

Collapse
 
iamlizzylogan profile image
Basia Józefowska

Thank you for this up-to-date tutorial. Works outside of the box ;)
It is a pity that the code is in an image rather than pasted as text, tough.