Configuración compuesta y producción

• 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",
},