Last active
May 24, 2018 16:51
-
-
Save hectorgool/2d96d83438155d7c4dacd537f2cbe854 to your computer and use it in GitHub Desktop.
production
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Platzi Video</title> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="http://localhost:9000/js/santo.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from'react'; | |
| import ReactDOM from'react-dom'; | |
| // Importamos dependencias de React | |
| const app = document.getElementById('app'); | |
| // Referenciamos un elemento con ID app | |
| const holaMundo = <h1>Hola Mundo</h1>; | |
| // Insertamos en una constante lo que queremos renderizar | |
| ReactDOM.render(holaMundo, app); | |
| // Le decimos a ReactDOM que renderizar y donde renderizar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "santo", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "webpack.config.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "build:dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development", | |
| "build": "webpack", | |
| "build:local": "webpack --env.NODE_ENV=local", | |
| "build:prod": "webpack -p --env.NODE_ENV=production --mode production" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "react": "^16.4.0", | |
| "react-dom": "^16.4.0" | |
| }, | |
| "devDependencies": { | |
| "babel-core": "^6.26.3", | |
| "babel-loader": "^7.1.4", | |
| "babel-preset-env": "^1.7.0", | |
| "babel-preset-es2015": "^6.24.1", | |
| "babel-preset-react": "^6.24.1", | |
| "babel-preset-stage-2": "^6.24.1", | |
| "clean-webpack-plugin": "^0.1.19", | |
| "css-loader": "^0.28.11", | |
| "extract-text-webpack-plugin": "^3.0.2", | |
| "file-loader": "^1.1.11", | |
| "style-loader": "^0.21.0", | |
| "url-loader": "^1.0.1", | |
| "webpack": "^4.8.3", | |
| "webpack-cli": "^2.1.4", | |
| "webpack-dev-server": "^3.1.4" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| const CleanWebpackPlugin = require('clean-webpack-plugin'); | |
| module.exports = (env) => { | |
| const plugins = [ | |
| new ExtractTextPlugin("css/[name].[hash].css") | |
| ] | |
| if (env.NODE_ENV === 'production') { | |
| plugins.push( | |
| new CleanWebpackPlugin(['dist'], {root: __dirname}) | |
| ) | |
| } | |
| return { | |
| entry: { | |
| "santo": path.resolve(__dirname, 'src/index.js'), | |
| }, | |
| output: { | |
| path: path.resolve(__dirname, 'dist'), | |
| filename: 'js/[name].[hash].js', | |
| publicPath: path.resolve(__dirname, 'dist')+"/", | |
| chunkFilename: 'js/[id].[chunkhash].js', | |
| }, | |
| devServer: { | |
| port: 9000, | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| // test: que tipo de archivo quiero reconocer, | |
| // use: que loader se va a encargar del archivo | |
| test: /\.(js|jsx)$/, | |
| exclude: /(node_modules)/, | |
| use: { | |
| loader: 'babel-loader', | |
| options: { | |
| presets: ['es2015', 'react', 'stage-2'], | |
| } | |
| }, | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: ExtractTextPlugin.extract({ | |
| use: [ | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| minimize: true, | |
| } | |
| } | |
| ] | |
| }) | |
| }, | |
| { | |
| test: /\.(jpg|png|gif|svg)$/, | |
| use: { | |
| loader: 'url-loader', | |
| options: { | |
| limit: 10000, | |
| fallback: 'file-loader', | |
| name: 'images/[name].[hash].[ext]', | |
| } | |
| } | |
| }, | |
| ] | |
| }, | |
| plugins | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| module.exports = { | |
| entry: { | |
| "santo": path.resolve(__dirname, 'src/index.js'), | |
| }, | |
| output: { | |
| path: path.resolve(__dirname, 'dist'), | |
| filename: 'js/[name].js' | |
| }, | |
| devServer: { | |
| port: 9000, | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| // test: que tipo de archivo quiero reconocer, | |
| // use: que loader se va a encargar del archivo | |
| test: /\.(js|jsx)$/, | |
| exclude: /(node_modules)/, | |
| use: { | |
| loader: 'babel-loader', | |
| options: { | |
| presets: ['es2015', 'react', 'stage-2'], | |
| } | |
| }, | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: ['style-loader', 'css-loader'] | |
| }, | |
| { | |
| test: /\.(jpg|png|gif|svg)$/, | |
| use: { | |
| loader: 'url-loader', | |
| options: { | |
| limit: 1000000, | |
| fallback: 'file-loader', | |
| name: 'images/[name].[hash].[ext]', | |
| } | |
| } | |
| }, | |
| ] | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment