• 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",
},
Código inicial
Curso Webpack en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?

Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬