How do I set up Vue.js with Webpack?

How do I set up Vue.js with Webpack?

To set up Vue.js with Webpack, you need to install Vue and Webpack, then configure Webpack to handle Vue files.

What packages do I need to install?

You need to install vue, webpack, webpack-cli, vue-loader, and vue-template-compiler.

Can you show me a basic Webpack configuration?

Sure! Here's a basic webpack.config.js:

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.vue$/, 
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

How do I run the Webpack build?

You can run the build by adding a script in your package.json like this:

"scripts": {
  "build": "webpack"
}

Then run npm run build in your terminal.