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
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
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
-P means we install it a production dependency.
vue: We need this obviously to make Vue Apps. Duh 😃.
Our index.html file.
Our webpack.config.js file.
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.
Btw, run this command in the root of the vue-webpack folder.
mkdir components
Our Main.vue file.
Our package.json file.
Run in the command line.
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.
npm i -P vue-router
Make new 3 vue files.
Home.vue,About.vue and Contact.vue.
Our modified Main.vue file.
Make a router.js file in the root folder.
Our modified app.js file.
Run the npm start command again.
Top comments (9)
That is so unuseful without any code one could copy.
Dude, this is marvelous! 🤘
Thanks, I'm glad that you like it.
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
How would you manually configure webpack to use webpackChunkName in router.js , if you want automatic code splitting?
Thanks dude
No problemo 😃!
Very nice, neat & clean article. Great job! Thank you so much!
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.