add Variabel + Sourcemaps + server --> with webpack

Author: simoneas02

es6-features/modulos.md

@@ -211,4 +211,130 @@ const webpack = require('webpack');
         ]
     }
 ```
-## Variáveis de Ambiente no Webpack
+## Variáveis de Ambiente no Webpack
+
+> Podemos criar variáveis para que de acordo com o seu valor a biblioteca pode ser mais ou menos comprimida.
+
+1. Para exemplificar melhor, executamos no terminal o comando `npm --save install react react-dom` para importarmos as bibliotecas react e react-dom.
+2. No arquivo `app.js` adicionamos as linhas abaixo para importar as duas bibliotecas.
+```JS 
+    import react from 'react';
+    import reactDom from 'react-dom';
+```
+3. No arquivo `webpack.config` criamos uma variável chamada `nodeEnv` e dentro de `plugins` defiimos como ela irá se comportar, o arquivo final ficou assim:
+```JS
+const webpack = require('webpack');
+const nodeEnv = process.env.NODE_ENV || 'production';
+
+    module.exports = {
+        entry: {
+            filename: './app.js'
+        },
+        output: {
+            filename: './build.js'
+        },
+        module: {
+            loaders: [
+                {
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    loader: 'babel-loader',
+                    query: {
+                        presets: [
+                            ['es2015', {modules: false}]
+                        ]
+                    }
+                }
+            ]
+        },
+        plugins: [
+            new webpack.optimize.UglifyJsPlugin({
+                compress: { warnings: false},
+                output: { comments: false }
+            }),
+            new webpack.DefinePlugin({
+                'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
+            })
+        ]
+    }
+```
+
+## Sourcemaps
+
+> Serve para mapear todo o código fonte e informar ponto a ponto o que cada elemento referencia, ou seja, faz uma referência entre o arquivo que tinhámos antes com o arquivo já compilado, isso é muito útil no desevolvimento até para depuração e descoberta de bugs. Uma observação importante é nunca subir o arquivo `build.js.map` para produção, porque ele é muito extenso e só é útil para facilitar no desenvolvimento.
+
+1. Para usar o Sourcemaps é necessário adicionar a variável `devtool: 'source-map'` dentro de `module.exports`
+2. Em `UglifyJsPlugin` adicione `sourceMap: true`, o arquivo final ficou assim:
+```JS
+const webpack = require('webpack');
+const nodeEnv = process.env.NODE_ENV || 'production';
+
+    module.exports = {
+        devtool: 'source-map',
+        entry: {
+            filename: './app.js'
+        },
+        output: {
+            filename: './build.js'
+        },
+        module: {
+            loaders: [
+                {
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    loader: 'babel-loader',
+                    query: {
+                        presets: [
+                            ['es2015', {modules: false}]
+                        ]
+                    }
+                }
+            ]
+        },
+        plugins: [
+            new webpack.optimize.UglifyJsPlugin({
+                compress: { warnings: false},
+                output: { comments: false },
+                sourceMap: true
+            }),
+            new webpack.DefinePlugin({
+                'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
+            })
+        ]
+    }
+```
+
+##  Inicializando um server com Webpack
+
+> Possibilita criar um servidor via `webpack-dev-server` que é útil para servir os arquivos estáticos no ambiente de desenvolvimento.
+
+1.  Execute no terminal o comando `npm install --save-dev webpack-dev-server` para instalar o webpack-dev-server.
+2. No arquivo `package.json` crie a task `"server": "./node_modules/.bin/webpack-dev-server --inline --open"`, o arquivo final ficará assim:
+```JS
+{
+  "name": "modulos-exemplos",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "build": "./node_modules/.bin/webpack --colors --progress",
+    "watch": "npm run build -- --watch",
+    "server": "./node_modules/.bin/webpack-dev-server --inline --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015-native-modules": "^6.9.4",
+    "ramda": "^0.23.0",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.4.2"
+  },
+  "dependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  }
+}
+```
+3. Para testar, execute no terminal `npm run server`.

modulos-exemplos/app.js

@@ -6,6 +6,9 @@ import * as R from 'ramda';
 
 import sum, { sub, multiplicacao, div as dividir, PI } from './utils';
 
+import react from 'react';
+import reactDom from 'react-dom';
+
 const arr1 = [1, 1, 1, 2, 2, 2, 3, 4, 5, 6];
 const arr2 = [5, 6, 6, 6, 7, 7, 8, 9, 10, 6, 1];
 
@@ -17,6 +20,6 @@ console.log(arr1);
 
 console.log(sum(20, 10))
 console.log(sub(20, 10))
-console.log(multiplicacao(20, 10))
+console.log(multiplicacao(20, 2))
 console.log(dividir(20, 10))
 console.log(PI)

modulos-exemplos/build.js

@@ -5,7 +5,8 @@
   "main": "app.js",
   "scripts": {
     "build": "./node_modules/.bin/webpack --colors --progress",
-    "watch": "npm run build -- --watch"
+    "watch": "npm run build -- --watch",
+    "server": "./node_modules/.bin/webpack-dev-server --inline --open"
   },
   "author": "",
   "license": "ISC",
@@ -14,7 +15,8 @@
     "babel-loader": "^6.4.1",
     "babel-preset-es2015-native-modules": "^6.9.4",
     "ramda": "^0.23.0",
-    "webpack": "^2.2.0"
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.4.2"
   },
   "dependencies": {
     "react": "^15.5.4",

modulos-exemplos/build.js.map

@@ -1,6 +1,8 @@
 const webpack = require('webpack');
+const nodeEnv = process.env.NODE_ENV || 'production';
 
     module.exports = {
+        devtool: 'source-map',
         entry: {
             filename: './app.js'
         },
@@ -24,7 +26,11 @@ const webpack = require('webpack');
         plugins: [
             new webpack.optimize.UglifyJsPlugin({
                 compress: { warnings: false},
-                output: { comments: false }
+                output: { comments: false },
+                sourceMap: true
+            }),
+            new webpack.DefinePlugin({
+                'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
             })
         ]
     }