webpack.config env.prod added & build scripts modified

CHANGELOG.md

@@ -1,4 +1,9 @@
-## Changelog CoreUI react 
+## Changelog [react](./REACT.md) version
+
+### 2017.08.24
+- webpack.config env.prod
+- Dashboard .dropdown-menu-right temp.scss hotfix (full)
+- callout.scss .chart-wrapper hotfix (full)
 
 ### 2017.08.11
 - Bootstrap 4 beta

REACT.md

@@ -0,0 +1,36 @@
+# React version
+
+## Intro 
+
+It uses Sass (with .scss). The style is loaded at the component level.
+
+Dependencies can be handled by **npm**.
+
+## Directories
+
+```
+src (js|jsx source)
+scss (scss source)
+public (html template)
+public/img (images)
+```
+
+## Usage
+
+**npm i** - to install dependencies
+
+## Sctipts
+
+**npm start** for developing (it runs webpack-dev-server)
+
+**npm run build** to run a dev build
+
+**npm run clean** to clean build dir
+
+**npm run dev** to run a dev build with watching filesystem for changes 
+
+
+## See also
+
+[Changelog](./CHANGELOG.md)
+[Readme](./README.md)

React_Full_Project/package.json

@@ -9,14 +9,14 @@
   "private": true,
   "homepage": ".",
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-hot-loader": "^1.3.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-loader": "^0.5.1",
@@ -26,29 +26,29 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.18.2",
-    "uglify-js": "^3.0.27",
+    "uglify-js": "^3.0.28",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.3",
+    "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.6.0",
     "font-awesome": "^4.7.0",
-    "history": "4.6.3",
+    "history": "4.7.2",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
-    "react-chartjs-2": "2.5.6",
+    "react-chartjs-2": "2.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "4.1.2",
+    "react-router-dom": "4.2.0",
     "reactstrap": "^4.8.0",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
-    "dev": "webpack -d --progress --watch",
+    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
-    "start": "webpack-dev-server --env.dev --open --hot --progress --colors --inline",
+    "start": "webpack-dev-server --progress --colors --inline --env.dev",
-    "build": "webpack -p --progress",
+    "build": "webpack -p --progress --env.prod",
     "clean": "rimraf ./build"
   },
   "engines": {

React_Full_Project/webpack.config.js

@@ -13,98 +13,100 @@ const SRC_DIR = path.resolve(__dirname, 'src');
 console.log('BUILD_DIR', BUILD_DIR);
 console.log('SRC_DIR', SRC_DIR);
 
-module.exports = {
+module.exports = (env = {}) => {
-  entry: {
+  return {
-    index: [SRC_DIR + '/index.js']
+    entry: {
-	},
+      index: [SRC_DIR + '/index.js']
-  output: {
+    },
-    path: BUILD_DIR,
+    output: {
-    filename: '[name].bundle.js'
+      path: BUILD_DIR,
-  },
+      filename: '[name].bundle.js'
-  watch: true,
+    },
-  devServer: {
+    // watch: true,
-    contentBase: BUILD_DIR,
+    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
-    //   port: 9001,
+    devServer: {
-    compress: true,
+      contentBase: BUILD_DIR,
-    hot: true,
+      //   port: 9001,
-    open: true
+      compress: true,
-  },
+      hot: true,
-  module: {
+      open: true
-    rules: [
+    },
-      {
+    module: {
-        test: /\.(js|jsx)$/,
+      rules: [
-        exclude: /node_modules/,
+        {
-        use: {
+          test: /\.(js|jsx)$/,
-          loader: 'babel-loader',
+          exclude: /node_modules/,
-          options: {
+          use: {
-            cacheDirectory: true,
+            loader: 'babel-loader',
-            presets: ['react', 'env']
+            options: {
+              cacheDirectory: true,
+              presets: ['react', 'env']
+            }
           }
-        }
+        },
-      },
+        {
-      {
+          test: /\.html$/,
-        test: /\.html$/,
+          loader: 'html-loader'
-        loader: 'html-loader'
+        },
-      },
+        {
-      {
+          test: /\.(scss)$/,
-        test: /\.(scss)$/,
+          use: ['css-hot-loader'].concat(extractSCSS.extract({
-        use: ['css-hot-loader'].concat(extractSCSS.extract({
+            fallback: 'style-loader',
-          fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {alias: {'../img': '../public/img'}}
+              },
+              {
+                loader: 'sass-loader'
+              }
+            ]
+          }))
+        },
+        {
+          test: /\.css$/,
+          use: extractCSS.extract({
+            fallback: 'style-loader',
+            use: 'css-loader'
+          })
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|ico)$/,
           use: [
             {
-              loader: 'css-loader',
+              // loader: 'url-loader'
-              options: { alias: { '../img': '../public/img' } }
+              loader: 'file-loader',
-            },
+              options: {
-            {
+                name: './img/[name].[hash].[ext]'
-              loader: 'sass-loader'
+              }
             }
           ]
-        }))
+        },
-      },
+        {
-      {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        test: /\.css$/,
+          loader: 'file-loader',
-        use: extractCSS.extract({
+          options: {
-          fallback: 'style-loader',
+            name: './fonts/[name].[hash].[ext]'
-          use: 'css-loader'
-        })
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif|ico)$/,
-        use: [
-          {
-            // loader: 'url-loader'
-            loader: 'file-loader',
-            options: {
-              name: './img/[name].[hash].[ext]'
-            }
           }
-        ]
+        }]
-      },
+    },
-      {
+    plugins: [
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+      new webpack.HotModuleReplacementPlugin(),
-        loader: 'file-loader',
+      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
-        options: {
+      new webpack.NamedModulesPlugin(),
-          name: './fonts/[name].[hash].[ext]'
+      extractCSS,
+      extractSCSS,
+      new HtmlWebpackPlugin(
+        {
+          inject: true,
+          template: './public/index.html'
         }
-      }]
+      ),
-  },
+      new CopyWebpackPlugin([
-  plugins: [
+          {from: './public/img', to: 'img'}
-    new webpack.HotModuleReplacementPlugin(),
+        ],
-    new webpack.optimize.UglifyJsPlugin(),
+        {copyUnmodified: false}
-    new webpack.NamedModulesPlugin(),
+      )
-    extractCSS,
+    ]
-    extractSCSS,
+  }
-    new HtmlWebpackPlugin(
+};
-      {
-        inject: true,
-        template: './public/index.html'
-      }
-    ),
-    new CopyWebpackPlugin([
-        {from: './public/img', to: 'img'}
-      ],
-      {copyUnmodified: false}
-    )
-  ]
-}
-;

React_Starter/CHANGELOG.md

@@ -1,13 +0,0 @@
-## Changelog CoreUI react 
-
-### 2017.08.01
-- Sidebar component: 
-	- title item with optional wrapper and class (_nav.js)
-	- nav link item with optional badge
-	- code refactoring
-
-### 2017.07.31
-- moved to [reactstrap](https://reactstrap.github.io/)
-- moved to [webpack](https://webpack.js.org/) (dropping gulp)
-- data driven Sidebar component (_nav.js)
-

React_Starter/package.json

@@ -9,14 +9,14 @@
   "private": true,
   "homepage": ".",
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-hot-loader": "^1.3.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-loader": "^0.5.1",
@@ -26,29 +26,29 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.18.2",
-    "uglify-js": "^3.0.27",
+    "uglify-js": "^3.0.28",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.3",
+    "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.6.0",
     "font-awesome": "^4.7.0",
-    "history": "4.6.3",
+    "history": "4.7.2",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
-    "react-chartjs-2": "2.5.6",
+    "react-chartjs-2": "2.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "4.1.2",
+    "react-router-dom": "4.2.0",
     "reactstrap": "^4.8.0",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
-    "dev": "webpack -d --progress --watch",
+    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
-    "start": "webpack-dev-server --env.dev --open --hot --progress --colors --inline",
+    "start": "webpack-dev-server --progress --colors --inline --env.dev",
-    "build": "webpack -p --progress",
+    "build": "webpack -p --progress --env.prod",
     "clean": "rimraf ./build"
   },
   "engines": {

React_Starter/webpack.config.js

@@ -13,98 +13,100 @@ const SRC_DIR = path.resolve(__dirname, 'src');
 console.log('BUILD_DIR', BUILD_DIR);
 console.log('SRC_DIR', SRC_DIR);
 
-module.exports = {
+module.exports = (env = {}) => {
-  entry: {
+  return {
-    index: [SRC_DIR + '/index.js']
+    entry: {
-	},
+      index: [SRC_DIR + '/index.js']
-  output: {
+    },
-    path: BUILD_DIR,
+    output: {
-    filename: '[name].bundle.js'
+      path: BUILD_DIR,
-  },
+      filename: '[name].bundle.js'
-  watch: true,
+    },
-  devServer: {
+    // watch: true,
-    contentBase: BUILD_DIR,
+    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
-    //   port: 9001,
+    devServer: {
-    compress: true,
+      contentBase: BUILD_DIR,
-    hot: true,
+      //   port: 9001,
-    open: true
+      compress: true,
-  },
+      hot: true,
-  module: {
+      open: true
-    rules: [
+    },
-      {
+    module: {
-        test: /\.(js|jsx)$/,
+      rules: [
-        exclude: /node_modules/,
+        {
-        use: {
+          test: /\.(js|jsx)$/,
-          loader: 'babel-loader',
+          exclude: /node_modules/,
-          options: {
+          use: {
-            cacheDirectory: true,
+            loader: 'babel-loader',
-            presets: ['react', 'env']
+            options: {
+              cacheDirectory: true,
+              presets: ['react', 'env']
+            }
           }
-        }
+        },
-      },
+        {
-      {
+          test: /\.html$/,
-        test: /\.html$/,
+          loader: 'html-loader'
-        loader: 'html-loader'
+        },
-      },
+        {
-      {
+          test: /\.(scss)$/,
-        test: /\.(scss)$/,
+          use: ['css-hot-loader'].concat(extractSCSS.extract({
-        use: ['css-hot-loader'].concat(extractSCSS.extract({
+            fallback: 'style-loader',
-          fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {alias: {'../img': '../public/img'}}
+              },
+              {
+                loader: 'sass-loader'
+              }
+            ]
+          }))
+        },
+        {
+          test: /\.css$/,
+          use: extractCSS.extract({
+            fallback: 'style-loader',
+            use: 'css-loader'
+          })
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|ico)$/,
           use: [
             {
-              loader: 'css-loader',
+              // loader: 'url-loader'
-              options: { alias: { '../img': '../public/img' } }
+              loader: 'file-loader',
-            },
+              options: {
-            {
+                name: './img/[name].[hash].[ext]'
-              loader: 'sass-loader'
+              }
             }
           ]
-        }))
+        },
-      },
+        {
-      {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        test: /\.css$/,
+          loader: 'file-loader',
-        use: extractCSS.extract({
+          options: {
-          fallback: 'style-loader',
+            name: './fonts/[name].[hash].[ext]'
-          use: 'css-loader'
-        })
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif|ico)$/,
-        use: [
-          {
-            // loader: 'url-loader'
-            loader: 'file-loader',
-            options: {
-              name: './img/[name].[hash].[ext]'
-            }
           }
-        ]
+        }]
-      },
+    },
-      {
+    plugins: [
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+      new webpack.HotModuleReplacementPlugin(),
-        loader: 'file-loader',
+      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
-        options: {
+      new webpack.NamedModulesPlugin(),
-          name: './fonts/[name].[hash].[ext]'
+      extractCSS,
+      extractSCSS,
+      new HtmlWebpackPlugin(
+        {
+          inject: true,
+          template: './public/index.html'
         }
-      }]
+      ),
-  },
+      new CopyWebpackPlugin([
-  plugins: [
+          {from: './public/img', to: 'img'}
-    new webpack.HotModuleReplacementPlugin(),
+        ],
-    new webpack.optimize.UglifyJsPlugin(),
+        {copyUnmodified: false}
-    new webpack.NamedModulesPlugin(),
+      )
-    extractCSS,
+    ]
-    extractSCSS,
+  }
-    new HtmlWebpackPlugin(
+};
-      {
-        inject: true,
-        template: './public/index.html'
-      }
-    ),
-    new CopyWebpackPlugin([
-        {from: './public/img', to: 'img'}
-      ],
-      {copyUnmodified: false}
-    )
-  ]
-}
-;