jcastro3 · fportela-ns · Jul 11, 2018 · Jul 11, 2018 · Jul 11, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "flash flash flash!",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --inline"
+    "start": "webpack-dev-server --inline --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",
@@ -26,15 +27,18 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.10",
-    "less": "^2.7.3",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.6.0",
     "less-loader": "^4.1.0",
     "style-loader": "^0.19.1",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.2"
+    "webpack": "^4.12.1",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.3"
   }
 }
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,5 @@
 </head>
 <body>
     <div id="root"></div>
-    <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import NSFlash from './NSFlash/NSFlash'
-import './index.less';
+import React from "react";
+import ReactDOM from "react-dom";
+import NSFlash from "./NSFlash/NSFlash";
+import "./index.less";
 
-const root = document.querySelector('#root');
-
-ReactDOM.render(
-    <div>
-        <NSFlash/>
-    </div>
-    , root);
+ReactDOM.render(<NSFlash />, document.getElementById("root"));
diff --git a/src/index.less b/src/index.less
@@ -1,28 +1,35 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
-input[type="text"], textarea, input[type="color"], input[type="file"] {
-    display: block;
-    margin: 15px;
+input[type="text"],
+textarea,
+input[type="color"],
+input[type="file"] {
+  display: block;
+  margin: 15px;
 }
 
-input[type="text"], input[type="file"],  textarea {
-    min-width: 40%;
-    width:90%;
-    padding: 6px 4px;
-} 
+input[type="text"],
+input[type="file"],
+textarea {
+  min-width: 40%;
+  width: 90%;
+  padding: 6px 4px;
+}
 
-input[type="text"], textarea {
-    border-radius: 3px;
-    border: 1px solid#cec8cc;
+input[type="text"],
+textarea {
+  border-radius: 3px;
+  border: 1px solid#cec8cc;
 }
 
-input[type="text"]:focus, textarea:focus {
-    outline: 1px solid #ffaf7e;
+input[type="text"]:focus,
+textarea:focus {
+  outline: 1px solid #ffaf7e;
 }
diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,27 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src",
+  output: {
+    path: path.join(__dirname, "build"),
+    filename: "bundle.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?/i,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+        options: {
+          presets: ["env", "react"]
+        }
+      },
+      {
+        test: /\.less$/,
+        use: ["style-loader", "css-loader", "less-loader"]
+      }
+    ]
+  },
+  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", hash: true })]
+};
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,11 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common");
+const path = require('path');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: "source-map",
+  devServer: {
+    contentBase: path.join(__dirname, "src")
+  }
+});
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -0,0 +1,6 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common");
+
+module.exports = merge(common, {
+  mode: "production"
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,5 @@ @@
     </head>
     <body>
         <div id="root"></div>
-        <script src="bundle.js"></script>
     </body>
     </html>