No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
12H
38M
12S
Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuraci贸n inicial de Webpack para PlatziStore

8/22
Recursos

Aportes 3

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Al final del video cuando ejecut茅 鈥榥pm run build鈥 me sal铆a error. Busqu茅 y dec铆a que el problema era por algo relacionado con postcss, entonces ejecut茅 鈥榥pm 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! 馃槃