Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Como indica en la documentación de Webpack, dado que el objetivo de los modos desarrollo y producción son diferentes, se recomienda una configuración separada para cada uno de ellos.
  • ¿Por qué?, porque para desarrollo querremos una serie de características y para producción otras muy diferentes.
  • Se trata de algo que hicimos al iniciar el curso y sobre lo que ahora vamos a expandir, moviendo las propiedades y funciones de desarrollo y producción a cada archivo y usar Webpack Merge para componer una única configuración.
  • Primero creemos la configuración común, para luego, instalando Webpack Merge con npm install --save-dev webpack-merge podamos crear la configuración de desarrollo.
  • Le toca el turno a la configuración de producción. Acto seguido y para poner todo a prueba vamos a editar nuestras tareas en el archivo package.json usando el flag --config e indicando los nuevos archivos de configuración y realizar pruebas.
"build": "webpack --config webpack.prod.js",
"build:dev": "webpack --config webpack.dev.js",
"serve": "webpack-dev-server --open --config webpack.dev.js",
  • De paso, vamos a hacer que cada recursos esté en su directorio correspondiente. Por ejemplo los archivos CSS en /css las imágenes en /img y JavaScript en /js.
  • Para el archivo CSS es tan sencillo como editar la ruta de MiniCssExtractPlugin en nuestra configuración común.
new MiniCssExtractPlugin({
  filename: "css/[name].[contenthash].css",
}),
  • En cuanto a las imágenes, lo mismo, debemos actualizar la ruta de nuestro File Loader con la propiedad options.
{
  test: /\.(png|svg|jpg|jpeg|gif)$/,
  loader: "file-loader",
  options: {
    name: "img/[name].[contenthash].[ext]",
  },
},
  • Y para JavaScript, podemos actualizar la propiedad output de nuestra configuración de producción.
output: {
  filename: "js/[name].[contenthash].bundle.js",
},

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue