1.

Git init
2. npm init -y
3. npm install react react-dom
4. npm install @babel/core babel-loader
@babel/preset-env @babel/preset-react -—save-dev

5. Crear archivo '/.babelrc'

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime"
],
"env":{
"development":{
"plugins":[
"transform-class-properties",
"babel-plugin-transform-object-assign",
"@babel/plugin-transform-runtime"
]
}
}
}

----Instalar webpack
6. npm install webpack webpack-cli
html-webpack-plugin html-loader
file-loader url-loader --save-dev

7. npm install webpack-dev-server --save-dev

8. Crear archivo '/webpack.config.js'

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = () => {
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
 },
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
},
},
{
test: /\.(s*)css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
'sass-loader',
],
},
{
test: /\.jpg|png|gif|woff|eot|ttf|svg|mp4|web$/,
use: [
{ loader: 'url-loader' },
],
},
],
},
node: {
fs: 'empty',
},
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: 'assets/[name].css',
}),
],
};
};