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.
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 😃.
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.
Btw, run this command in the root of the vue-webpack folder.
Run in the command line.
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.
Run the npm start command again.