Vue.js / webpack creates no build file?

Question

This might be a stupid question but what the hell.

I am using the vue-cli webpack-simple template, in the webpack config of this project I find the following:

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

No file is being built though. When running the webpack server I can access the file through the browser though. Is the build.js file only available when the webpack development server is running?

Is this what defines runtime vs standalone? Even after reviewing the documentation I am still confused what the exact difference is.

I need a compiled file since I am trying to publish a transpiled file to publish my package to NPM.

Cheers.

Answer 1

Run

npm run build

That will create a /dist directory that contains build.js.

You can see the scripts that are available to run in package.json. The webpack-simple template only has run and build. You'll need to copy over the index.html and the dist folder.

When you are developing using npm run dev you are using hot module reloading and no js is built a temporary one available through the hot module server.

If you want to build just one single file component you can use the vue-cli's build command.

vue build Component.vue --prod --lib Component

where Component is the name of the single file component. This will generate a script file containing only the component you specified. Include that script in your HTML and expose it globally using `Vue.component("component", Component).