Merge pull request #114 from OpenDevUFCG/feat/webpack-prod-config

Adiciona configuração de produção e desenvolvimento no webpack

.gitignore

@@ -160,4 +160,7 @@ $RECYCLE.BIN/
 ### env files
 docs/
 
+### vscode
+.vscode/
+
 # End of https://www.gitignore.io/api/node,linux,macos,windows,visualstudiocode

package.json

@@ -7,8 +7,8 @@
     "license": "MIT",
     "scripts": {
         "test": "yarn flow",
-        "build": "webpack",
-        "start": "webpack-dev-server --progress --colors --inline --hot --host 0.0.0.0",
+        "build": "webpack --config ./webpack/webpack.prod.js",
+        "start": "webpack-dev-server --config ./webpack/webpack.dev.js --progress --colors --inline --hot --host 0.0.0.0",
         "lint": "eslint .",
         "flow": "flow"
     },
@@ -46,7 +46,8 @@
         "url-loader": "^2.2.0",
         "webpack": "^4.24.0",
         "webpack-cli": "^3.1.2",
-        "webpack-dev-server": "^3.1.11"
+        "webpack-dev-server": "^3.1.11",
+        "webpack-merge": "^4.2.2"
     },
     "dependencies": {
         "axios": "^0.18.0",

webpack.config.js → webpack/webpack.common.js

@@ -1,18 +1,16 @@
+const webpack = require('webpack');
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const parentDir = path.join(__dirname, '../');
+
 const config = {
     mode: 'development',
-    entry: ['react-dev-utils/webpackHotDevClient', './src/index.js'],
-    devServer: {
-        port: 8000,
-        contentBase: __dirname + '/public',
-        historyApiFallback: true,
-    },
+    entry: [`${parentDir}src/index.js`],
     output: {
-        path: path.resolve(__dirname, 'public'),
+        path: `${parentDir}public/`,
         filename: 'bundle.[hash].js',
     },
     module: {
@@ -48,8 +46,7 @@ const config = {
     plugins: [
         new HtmlWebpackPlugin({
             filename: 'index.html',
-            template: __dirname + '/src/index.html',
-            hash: true,
+            template: `${parentDir}src/index.html`,
         }),
         new MiniCssExtractPlugin({
             filename: 'style.[contenthash].css',

webpack/webpack.dev.js

@@ -0,0 +1,17 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const path = require('path');
+const common = require('./webpack.common');
+
+const parentDir = path.join(__dirname, '../');
+
+module.exports = merge(common, {
+    entry: ['react-dev-utils/webpackHotDevClient'],
+    devServer: {
+        port: 8000,
+        contentBase: `${parentDir}public`,
+        historyApiFallback: true,
+    },
+
+    mode: 'development',
+});

webpack/webpack.prod.js

@@ -0,0 +1,7 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+    mode: 'production',
+});

yarn.lock

@@ -6032,6 +6032,13 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"