Vue.js webpack export code for production

Question

This is the first time I have used a frontend Build Tool. In the past I have never used any type of a framework that was more complicated to install than just adding a <script> tag to the top of my html page. Now you know my level of knowledge.

I have a vue.js/vuetify application with directory structure like this:

I think it started with the vuetify/webpack advanced template. And I am trying to export the project into something that I can put online. I have in my head that somehow I can run some type of a command that will generate all my code into .html, .css, and .js files that I could then hook up to any sort of backend that I wanted.

If my assumption is correct, and that's how things are done, then how is routing handled? Is the entire site just in one html file?

I think webpack is supposed to do this maybe? However when I try to run webpack from the command line, I get command not found.

If my assumption is wrong, then how do I get this online?

Answer 1

Use the npm run build command. You can see what the command does inside the package.json file, scripts object.

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 }

Your entire site will be compiled into the index.html file and the build.js file located in the /dist folder. Both the /dist folder and the build.js are generated when you run the npm run build command. Make sure the script src inside of index.html is pointing to your build.js file.