Webpack

Lo interesante es que Vue 3 ya no incluye el webpack.config.js, para añadir la configuración de WebPack en Vue 3 se debe crear un archivo llamado: vue.config.js con lo siguiente:

module.exports = {
	configureWebpack: {
		// Aquí la configuración de WebPack
	}
}

Aunque realmente la configuración base por defecto ya la tiene Vue internamente

Con la versión Vue-CLI 3 el archivo webpack ya no es necesario según veo. Tampoco ningún tipo de configuración relacionado a webpack?

Chale si me está costando trabajo que este curso no esté actualizado, por que no me corresponde lo que instalé con lo que está en el curso, y no sé que funciona y que ya no, de haber sabido agarraba el curso básico, pero creí que este era más completo.

¿Para cuando el curso de Vue 3?, este ya quedó obsoleto 😦

ya estamos en vue 3.11.0 para cuando actualizamos …

en la version de cli-vue 3, ya viene incluida la configuracion de webpack en uno de sus servicios:

Servicio CLI
Este servicio es una dependencia para el desarrollo de proyectos con Vue JS, se despliega en cada proyecto que hayas creado con Vue Cli. El Servicio CLI está creado bajo Webpack y Webpack Dev Server

Webpack

Es un bundler, nos permite escribir nuestro codigo modularizado en distintas partes para mejorar nuestra experiencia de desarrollo y en el momento en que querramos ejecutar el proyecto mergea todos los modulos creando una version optimizada para el navegador.

• No solo nos permite buildiar archivos Js sino tambien archivos estaticos como html o css(o sass)
• Todas las configuraciones se encuentran en el archivo webpack.config.js

• Entries → nuestro codigo sin optimizar, tambien se va a tomar en cuenta los archivos a los que se haga referencia dentro del que nombramos como entry
• Output → marcamos donde queremos que se genere la version optimizada de nuestro codigo

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

rules → Nos permite generar acciones intermedias entre que se produce la entrada y se genera la salida

En la prop test le indicamos una expresion regular que va a chequear todos los archivos buscando el patron deseado

• Checkear que cumpla con reglas de linteo
• Si los test pasan
• Compilar Sass al css
• Etc

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: false,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

Este bloque de codigo chequea si el env es dev o prod para generar los cambios necesarios

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

¿Cómo configuro Webpack con vue-cli 3?

Se necesita una actualización de este curso, por favor

Adjunto el codigo con algunos comentarios para entenderlo mejor:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js', /* archivo de entrada */
  output: {  /* punto de salida */
    path: path.resolve(__dirname, './dist'), /* indica donde esta la carp donde se quiere gener el output */ 
    publicPath: '/dist/',
    filename: 'build.js' /* archivo que tiene todo el contenido de la app */
  },
  module: {
    rules: [ /* son transformaciones intermedias del proceso de entrada y salida */ 
      {
        test: /\.css$/, /* indica que la prp test indica que archivoa aplican la transf */ 
        use: [
          'vue-style-loader', 
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: { 
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader', /* la app funcionaria con todos los browsers */
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader', /* permite extraer archivos jpg, img */
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: { /* le dice cuales son los archivos que debe compilar */
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: { /* permite usar la app usando un servidor web */
    historyApiFallback: true,
    noInfo: false, /* Se pasa de true a false para ver mas info en consola */
    overlay: true
  },
  performance: { /* permite dar pistas sobre problemas del tam de archivo */ 
    hints: false
  },
  devtool: '#eval-source-map' /* permite generar sourse map */ 
}

if (process.env.NODE_ENV === 'production') { /* pregunta o evalua si se esta corriendo webpack para produccion o no */ 
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

👌

el video esta a 60fps? se ve bastante bien

La propiedad test es como el criterio de busqueda para los archivos que aplicará la regla, mediante una expresion regular.
Luego en la propiedad loader viene el nombre de la regla.

Vue-loader es un modulo de node que transforma el codigo vue en codigo js.

Las rules permiten configurar procesos intermedios entre el entrypoint y el output. Por ejemplo: compilar archivos sass, verificar linteo etc…

Que son las rules? aqui la respuesta

entry: el punto de entrada
output el archivo de salida

Module:
rules: son reglas para aplicar a regular expressions

ya casi no recordaba webpack!

Yo estoy trabajando con la versión de 4.4.1 de Vue

ya me habia olvidado webpack!!

Gran profesor!