Configuración inicial de Webpack para PlatziStore

Al final del video cuando ejecuté ‘npm run build’ me salía error. Busqué y decía que el problema era por algo relacionado con postcss, entonces ejecuté ‘npm install -D postcss postcss-cli’ y luego 'npm run build y ahí ya no me sacó error.

Configuración inicial de Webpack para PlatziStore

• Creamos el archivo webpack.config.dev.js
• Copiamos todo el código de webpack.config.js y lo pegamos a webpack.config.dev.js
  Actualizamos en webpack.config.dev.js el apartado devServer:

  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3005,
  },

Instalamos las siguientes dependencias:

npm install terser-webpack-plugin clean-webpack-plugin css-minimizer-webpack-plugin -D

En webpack.config.js añadimos:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
....
const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
....
plugins: [
	......
	new CleanWebpackPlugin
],
optimization: {
    minimize: true,
    minimizer: [
      new CSSMinimizerPlugin(),
      new TerserPlugin(),
    ]
  },

Y en package.json actualizamos:

 "build": "webpack --mode production --config webpack.config.js",
 "start": "webpack serve --open --mode development  --config webpack.config.dev.js",

y npm run start y/o npm run build

Hola a todos! A día de hoy la propiedad contentBase de webpack dev server ya no está disponible, así que después de investigar un poco encontré la configuración que se debería usar ahora.

devServer: {
	historyApiFallback: true,
	watchFiles: ['./src/**/*', './public/**/*'],
	liveReload: true,
	compress: true,
	port: 8000,
	open: true,
}

En pocas palabras:

• watchFiles le indica al servidor cuáles archivos debería estar revisando para detectar cambios.
• liveReload le indica al servidor si se debería reiniciar cuando se detecten cambios dentro de los archivos especificados en watchFiles.

Espero que a alguien le sea de ayuda! 😄