15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-app",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "webpack --mode=production",
8 | "dev": "webpack serve --mode=development",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/core": "^7.14.0",
16 | "@babel/preset-react": "^7.13.13",
17 | "babel-loader": "^8.2.2",
18 | "css-loader": "^5.2.4",
19 | "html-webpack-plugin": "^5.3.1",
20 | "style-loader": "^2.0.0",
21 | "webpack": "^5.36.2",
22 | "webpack-cli": "^4.6.0",
23 | "webpack-dev-server": "^3.11.2"
24 | },
25 | "dependencies": {
26 | "react": "^17.0.2",
27 | "react-dom": "^17.0.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 |
3 | const useNotes = (url) => {
4 | const [notes, setNotes] = useState([])
5 |
6 | useEffect(() => {
7 | fetch(url).then(response => response.json())
8 | .then(notes => {
9 | setNotes(notes)
10 | })
11 | }, [url])
12 |
13 | return notes
14 | }
15 |
16 | const App = () => {
17 | const [counter, setCounter] = useState(0)
18 | const [values, setValues] = useState([])
19 | const notes = useNotes(BACKEND_URL)
20 |
21 | const handleClick = () => {
22 | setCounter(counter + 1)
23 | setValues(values.concat(counter))
24 | }
25 |
26 | return (
27 |
28 | hello webpack {counter} clicks
29 |
30 |
{notes.length} notes on server {BACKEND_URL}
31 |
32 | )
33 | }
34 |
35 | export default App
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
React App
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | import './styles.css'
5 |
6 | ReactDOM.render(
, document.getElementById('root'))
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4 | }
5 |
6 | body {
7 | background: #aaa;
8 | display: grid;
9 | place-content: center;
10 | min-height: 100vh;
11 | margin: 0;
12 | }
13 |
14 | .container {
15 | border: 1px solid #fff;
16 | color: #fff;
17 | border-radius: 4px;
18 | padding: 1rem;
19 | }
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | export const sayHi = () => console.log('hi!')
2 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
2 | const path = require('path')
3 | const webpack = require('webpack')
4 |
5 | module.exports = (env, {mode}) => {
6 | console.log({mode})
7 |
8 | const isProduction = mode === 'production'
9 |
10 | const backendUrl = isProduction
11 | ? 'https://fierce-shelf-74800.herokuapp.com/api/notes'
12 | : 'http://localhost:3001/api/notes'
13 |
14 | return {
15 | // entry: './src/index.js',
16 | output: {
17 | filename: isProduction ? '[name].[contenthash].js' : 'main.js',
18 | path: path.resolve(__dirname, 'build')
19 | },
20 | plugins: [
21 | new webpack.DefinePlugin({
22 | BACKEND_URL: JSON.stringify(backendUrl)
23 | }),
24 | new HtmlWebpackPlugin({ template: 'src/index.html' })
25 | ],
26 | devServer: {
27 | // contentBase: path.resolve(__dirname, 'build'), default,
28 | open: true, // para abrir el navegador
29 | overlay: true,
30 | compress: true,
31 | port: 3000,
32 | },
33 | devtool: 'source-map',
34 | module: {
35 | rules: [
36 | {
37 | test: /\.jsx?$/,
38 | loader: 'babel-loader',
39 | options: {
40 | presets: [
41 | [
42 | '@babel/preset-react',
43 | {
44 | runtime: 'automatic'
45 | }
46 | ]
47 | ]
48 | }
49 | },
50 | {
51 | test: /\.css$/,
52 | use: ['style-loader', 'css-loader']
53 | }
54 | ]
55 | }
56 | }
57 | }
--------------------------------------------------------------------------------
9 |
10 |
11 |
12 |