Webpack

5/53
Recursos

Webpack: Tiene el prop贸sito de trabajar con diferentes archivos en nuestro desarrollo local, pero generando un 煤nico archivo, aunque podemos configurarlo para que sea uno, dos o tres archivos, eso depende de c贸mo lo necesitemos.

Webpack tambi茅n nos permite agregar archivos de CSS, archivos .svg, im谩genes, urls y contenidos. Esto quiere decir que se puede compilar archivos de JavaScript y archivos est谩ticos.

Aportes 19

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

驴C贸mo configuro Webpack con vue-cli 3?

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

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
<h3>Webpack recibe entries y genera ouputs.</h3>
  • 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'
},
<h3>Module</h3>

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
    })
  ])
}

馃憣

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!