From e31e967fcc592d30fccc190424d439d15a6745ca Mon Sep 17 00:00:00 2001
From: MarS <Mar.Ser.DLX@gmail.com>
Date: Fri, 19 Apr 2019 00:29:14 +0300
Subject: [PATCH] Improvment experiments inherit

Added babel with plugins.
Updated webpack and webpack config file.
Used react.
---
 experiments/inherit/package.json              |  9 ++++--
 .../{awesome-module.js => awesome-module.jsx} | 11 +++----
 experiments/inherit/src/index.js              |  8 ++---
 experiments/inherit/webpack.config.js         | 32 +++++++++++++++++--
 4 files changed, 45 insertions(+), 15 deletions(-)
 rename experiments/inherit/src/{awesome-module.js => awesome-module.jsx} (51%)

diff --git a/experiments/inherit/package.json b/experiments/inherit/package.json
index bb3c443..a49b00f 100644
--- a/experiments/inherit/package.json
+++ b/experiments/inherit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basic",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -8,13 +8,18 @@
     "build": "webpack"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
     "css-loader": "^0.28.10",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.0.6",
     "style-loader": "^0.20.3",
     "uglifyjs-webpack-plugin": "^1.2.3",
     "url-loader": "^1.0.1",
-    "webpack": "^4.0.0",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.0.0"
   },
   "dependencies": {
diff --git a/experiments/inherit/src/awesome-module.js b/experiments/inherit/src/awesome-module.jsx
similarity index 51%
rename from experiments/inherit/src/awesome-module.js
rename to experiments/inherit/src/awesome-module.jsx
index 52ac867..a15f19f 100644
--- a/experiments/inherit/src/awesome-module.js
+++ b/experiments/inherit/src/awesome-module.jsx
@@ -1,14 +1,11 @@
+import React from 'react';
 import 'font-awesome/css/font-awesome.css';
 import other from './some/other/module';
 
 export default () => {
   console.log(other);
-  const rootElm = document.createElement('div');
-
-  rootElm.innerHTML = `
+  return (<div>
     <h1>Test inherit</h1>
-    <h2>Font Awesome <i class="fa fa-bath"></i></h2>
-  `;
-
-  return rootElm;
+    <h2>Font Awesome <i className="fa fa-bath"></i></h2>
+  </div>);
 };
diff --git a/experiments/inherit/src/index.js b/experiments/inherit/src/index.js
index 84932f7..05e27d8 100644
--- a/experiments/inherit/src/index.js
+++ b/experiments/inherit/src/index.js
@@ -1,5 +1,5 @@
-import awesomeModule from './awesome-module';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import awesomeModule from './awesome-module.jsx';
 
-const elm = awesomeModule();
-
-document.body.append(elm);
+ReactDOM.render(awesomeModule(), document.getElementById('root'));
diff --git a/experiments/inherit/webpack.config.js b/experiments/inherit/webpack.config.js
index fe350ae..c69801e 100644
--- a/experiments/inherit/webpack.config.js
+++ b/experiments/inherit/webpack.config.js
@@ -5,9 +5,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   context: __dirname,
+  devtool: 'source-map',
   entry: {
     main: './src/index.js',
   },
+  target: 'web',
 
   output: {
     filename: '[name].bundle.js',
@@ -17,6 +19,14 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: true,
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+        },
+      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -35,6 +45,22 @@ module.exports = {
     ],
   },
 
+  resolve: {
+    extensions: [
+      '.js',
+      '.jsx',
+      '.css',
+      '.png',
+      '.jpg',
+      '.jpeg',
+      '.svg',
+      '.ttf',
+      '.eot',
+      '.woff',
+      '.woff2',
+    ],
+  },
+
   plugins: [
     new HtmlWebpackPlugin({
       inject: true,
@@ -45,12 +71,14 @@ module.exports = {
       inject: true,
       filename: '[name].[hash].js',
       entry: {
-        vendor: ['./src/awesome-module.js', 'react', 'react-dom', 'font-awesome'],
+        vendor: [/*'./src/awesome-module.js',*/ 'react', 'react-dom' /*, 'font-awesome'*/],
         other: ['react'],
       },
 
       path: './dll',
-      inherit: true,
+      inherit: {
+        devtool: 'source-map',
+      },
       config: {
         output: {},
         plugins: [