Comandos para iniciar proyecto con NPM

#iniciar con NPM
npm init 
#iniciar con github 
git init 
#instalamos para react 
npm install react react-dom
#instalar babel para que corra en cualquier version 
npm install @babel/core @babel/preset-env @babel/preset-react
#instalacion de webpack 
npm install webpack webpack-cli webpack-dev-server
#instalacion de plugins y loaders 
npm install babel-loader html-loader html-webpack-plugin
#para corregir warnings y que corra bien, loader para css sass
npm install css-loader mini-css-extract-plugin sass sass-loader style-loader –D

Configuración de archivo webpack.config.js

path se agrega para saber donde se va a trabajar

el punto de entrada de nuestra aplicacion es entry y recibe archivo principal

output.path dar un resolve para decir donde nos encontramos

filename es para el nombre del empaquetado

en resolve se añadiran las extenciones que estaremos utilizando

module/rules es para las configuraciones

module-rules-test es para identificar los archivos

module-rules-exclude es para excluir carpetas

module-rules-user es para el loader que se utilizara

mode development es para decir que la configuracion de para modo development

const { plugins } = require('@babel/preset-env/lib/plugins-compat-data');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',        
    },
    mode : 'development',
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
				test: /\\.s[ac]ss$/i,
				use: [
					"style-loader",
					"css-loader",
					"sass-loader",
				],
			}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
			filename: '[name].css'
		}),
    ],
	devServer: {
	contentBase : path.join(__dirname, 'dist'),
	port:3006
}
}

plugins nos permite agregar los plugins que previamente instalamos y utilizaremos

filename es como se va a llamar cuando lo preparemos

devServer para trabajar con los elementros que son clave para nuestro entorno de desarrollo