Cursos Empresas Blog Live Conf Eventos Precios

0:0056:10

Setup con Webpack para el Chat en Tiempo Real con React.js

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 17 / 22

Ver clases

Comentarios

Juan Diaz#3783456
Repo: Chat
Fabian Rafael Calzadilla Andrade#5128215
No me gusto, siento que le falta que contenido para lo largo que es el video.

Rodrigo Andrés Moreno Pertúz#3832548

f1 -> configurar fragmentos de codigo -> babel javascript


	"webpack production 19/jul/22 webpack.config.js": {
		"prefix": "webpp",
		"body": [
			"const path = require('path');",
			"const HtmlWebpackPlugin = require('html-webpack-plugin');",
			"const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
			"const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');",
			"const { CleanWebpackPlugin } = require('clean-webpack-plugin');\n",
			"module.exports = {",
			"	entry: './src/index.js',",
			"	output: {",
			"		filename: 'bundle.js',",
			"		path: path.resolve(__dirname, 'dist'),",
			"		publicPath: '/'",
			"	},",
			"	resolve: {",
			"		extensions: ['.js', '.jsx']",
			"	},\n",
			"	mode: 'production',",
			"	module: {",
			"		rules: [",
			"			{",
			"				test: /\.(js|jsx)$/,",
			"				exclude: /node_modules/,",
			"				use: {",
			"					loader: 'babel-loader',",
			"					options: {",
			"						presets: ['@babel/preset-env', '@babel/preset-react']",
			"					},",
			"				}",
			"			},",
			"			{",
			"				test: /\.(png|jpg|gif|svg|jpeg|pdf)$/,",
			"				type: 'asset/resource',",
			"			},",
			"			{",
			"				test: /\.html$/,",
			"				use: { loader: 'html-loader', }",
			"			},",
			"			{",
			"				test: /\.css$/,",
			"				use: [",
			"					MiniCssExtractPlugin.loader,",
			"					{ loader: 'css-loader', }",
			"				]",
			"			},",
			"		]",
			"	},",
			"	plugins: [",
			"		new HtmlWebpackPlugin({",
			"			template: './public/index.html',",
			"			filename: './index.html'",
			"		}),",
			"		new MiniCssExtractPlugin({",
			"			filename: 'style.css',",
			"			chunkFilename: '[name].css'",
			"		}),",
			"		new CleanWebpackPlugin(),",
			"	],\n",
			"	optimization: {",
			"		minimize: true,",
			"		minimizer: [new CssMinimizerPlugin()]",
			"	}",
			"};",
		],
		"description": "webpack config 19/jul/22 (production)"
	},

Rodrigo Andrés Moreno Pertúz#3832543

f1 -> configurar fragmentos de codigo -> babel javascript

	"webpack development 19/jul/22 webpack.config.dev.js": {
		"prefix": "webpd",
		"body": [
			"const path = require('path');",
			"const HtmlWebpackPlugin = require('html-webpack-plugin');",
			"const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
			"const { CleanWebpackPlugin } = require('clean-webpack-plugin');\n",
			"module.exports = {",
			"	entry: './src/index.js',",
			"	output: {",
			"		filename: 'bundle.js',",
			"		path: path.resolve(__dirname, 'dist'),",
			"		publicPath: '/'",
			"	},",
			"	resolve: {",
			"		extensions: ['.js', '.jsx']",
			"	},\n",
			"	mode: 'development',",
			"	module: {",
			"		rules: [",
			"			{",
			"				test: /\.(js|jsx)$/,",
			"				exclude: /node_modules/,",
			"				use: {",
			"					loader: 'babel-loader',",
			"					options: {",
			"						presets: ['@babel/preset-env', '@babel/preset-react']",
			"					},",
			"				}",
			"			},",
			"			{",
			"				test: /\.(png|jpg|gif|svg|jpeg|pdf)$/,",
			"				type: 'asset/resource',",
			"			},",
			"			{",
			"				test: /\.html$/,",
			"				use: { loader: 'html-loader', }",
			"			},",
			"			{",
			"				test: /\.css$/,",
			"				use: [",
			"					MiniCssExtractPlugin.loader,",
			"					{ loader: 'css-loader', }",
			"				]",
			"			},",
			"		]",
			"	},",
			"	plugins: [",
			"		new HtmlWebpackPlugin({",
			"			template: './public/index.html',",
			"			filename: './index.html'",
			"		}),",
			"		new MiniCssExtractPlugin({",
			"			filename: 'style.css',",
			"			chunkFilename: '[name].css'",
			"		}),",
			"		new CleanWebpackPlugin(),",
			"	],\n",
			"	devServer: {",
			"		static: {",
			"			directory: path.join(__dirname, 'dist')",
			"		},",
			"		port: 64340,",
			"		compress: true,",
			"		hot: true,",
			"		historyApiFallback: true,",
			"	}",
			"}",
		],
		"description": "webpack config 19/jul/22 (development)"
	},

Rodrigo Andrés Moreno Pertúz#3831940
:) Buena nueva configuracion de webpack, de una vez para los snippets de codigo xD