• 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",
},
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬