Soy nuevo en vue.js y webpack .

Estoy tratando de entender cómo funciona el webpack y cómo puedo implementarlo en vue.js

Hay 2 métodos que usan webpack en vue.js

1. Usando vue-cli

Puedo ejecutar vue add webpack en la terminal, luego se generará vue.config.js .

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

En paquete.json

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

2. Configuración manual
Puedo instalar webpack y 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"], }, };

En paquete.json

 "build": "webpack --mode production"

Desde arriba, puedo ver alguna diferencia en la sintaxis.
1. script de creación
2.config.js
etc.

¿De qué manera preferiría usar el desarrollador moderno de Vue y por qué?