I am new to vue.js and webpack.

I am trying to understand how webpack works and how I can implement it in vue.js.

There are 2 methods using webpack in vue.js.

1.Using vue-cli

I can run vue add webpack in terminal, then vue.config.js will be generated.

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

In package.json

  "scripts": {
    "build": "vue-cli-service build"
  },
  ...

2.Manually Setup
I can manaully install webpack and webpack-cli.

webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.runtime.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
};

In package.json

"build": "webpack --mode production"

From above, I can see some difference in syntax.
1.build script
2.config.js
etc

Which way would modern Vue developer prefer to use and why?