Merge pull request #137 from rhenshaw56/OEUI-193

OEUI-193 : Upgraded webpack to version 3.8.1

app/css/openmrs-owa-orderentry.scss

@@ -7,7 +7,6 @@
  * graphic logo is a trademark of OpenMRS Inc.
  */
 
- @import '~@openmrs/style-referenceapplication/lib/referenceapplication.css';
 
 body {
     font-family: "OpenSans", Arial, sans-serif;

app/js/openmrs-owa-orderentry.jsx

@@ -11,6 +11,8 @@ import { render } from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import 'babel-polyfill';
+import '@openmrs/style-referenceapplication/lib/referenceapplication.css';
+import '../css/openmrs-owa-orderentry.scss';
 
 import createStore from './redux-store';
 import routes from './routes';

app/js/reducers/labOrders/labConceptsReducer.js

@@ -8,7 +8,7 @@ import initialState from '../initialState';
 
 const removeDuplicateTests = (tests) => {
   const uniqueTestIds = Array.from(new Set(tests.map(test => test.uuid)));
-  const uniqueTests = []; 
+  const uniqueTests = [];
   tests.forEach((test) => {
     const testIndex = uniqueTestIds.indexOf(test.uuid);
     if (testIndex !== -1) {

package.json

@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "archiver": "^1.0.0",
+    "autoprefixer": "^6.7.7",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
@@ -56,7 +57,7 @@
     "chai": "^4.1.2",
     "codecov": "^3.0.0",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "0.28.7",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
@@ -66,10 +67,9 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.8.2",
     "expect": "^23.0.0-alpha.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
+    "file-loader": "^1.1.5",
     "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.24.1",
+    "html-webpack-plugin": "2.30.1",
     "identity-obj-proxy": "^3.0.0",
     "jasmine-core": "^2.6.4",
     "jest": "^22.4.2",
@@ -87,6 +87,14 @@
     "node-sass": "^4.8.3",
     "nyc": "^11.6.0",
     "on-build-webpack": "^0.1.0",
+    "postcss-cssnext": "^2.11.0",
+    "postcss-each": "^0.10.0",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.6",
+    "postcss-mixins": "^6.0.0",
+    "postcss-nesting": "^4.0.1",
+    "postcss-reporter": "^4.0.0",
+    "postcss-scss": "0.4.1",
     "raw-loader": "^0.5.1",
     "react-dom": "^16.2.0",
     "redux-logger": "^3.0.6",
@@ -95,17 +103,17 @@
     "sass-loader": "^6.0.7",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.7",
-    "webpack": "^1.15.0",
+    "webpack": "^3.8.1",
     "yargs": "^4.3.1"
   },
   "scripts": {
     "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "clean": "rimraf dist && rimraf coverage*",
-    "build": "npm run clean && webpack --progress --colors --mode=production --target=web",
-    "build:dev": "npm run clean && webpack --progress --colors --mode=dev --target=web",
+    "build": " npm run clean && NODE_ENV=\"production\" webpack --progress --colors",
+    "build:dev": "npm run clean && NODE_ENV=\"development\" webpack --progress --colors",
     "build:prod": "npm run test && npm run build",
-    "build:deploy": "webpack --progress --colors --mode=deploy --target=web",
-    "watch": "webpack --progress --colors --watch --mode=deploy --target=web",
+    "build:deploy": "NODE_ENV=\"deploy\" webpack --progress --colors --target=web",
+    "watch": "NODE_ENV=\"development\" webpack --progress --colors --watch --cache=false",
     "test": "npm run lint && jest -u --coverage --maxWorkers=4",
     "test:debug": "karma start",
     "lint": "node_modules/.bin/eslint . --ext .js,.jsx"

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    plugins: {
+      'postcss-import': {
+        root: __dirname,
+      },
+      'postcss-mixins': {},
+      'postcss-each': {},
+      'postcss-cssnext': {}
+    },
+  };
+
+

webpack.config.js

@@ -11,21 +11,19 @@
 const webpack = require('webpack');
 const path = require('path');
 const fs = require('fs');
-const env = require('yargs').argv.mode;
 const target = require('yargs').argv.target;
 const targetPort = require('yargs').argv.targetPort;
 
 const UglifyPlugin = webpack.optimize.UglifyJsPlugin;
 const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
-const DedupePlugin = webpack.optimize.DedupePlugin;
-
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const WebpackOnBuildPlugin = require('on-build-webpack');
 
+const autoprefixer = require('autoprefixer');
 
-const nodeModulesDir = path.resolve(__dirname, '../node_modules');
+const env = process.env.NODE_ENV;
 
 const THIS_APP_ID = 'openmrs-owa-orderentry';
 
@@ -36,10 +34,6 @@ let outputFile = `.bundle`;
 let vendorOutputFile;
 let outputPath;
 
-var configJson;
-let appEntryPoint;
-let localOwaFolder;
-
 let devtool;
 
 var getConfig = function () {
@@ -75,6 +69,42 @@ var resolveBrowserSyncTarget = function () {
 };
 var browserSyncTarget = resolveBrowserSyncTarget();
 
+const rules = [
+	{
+		test: /\.jsx?$/,
+		loader: 'babel-loader',
+		exclude: /node_modules/,
+		query: {
+			presets: ['env', 'react'],
+			cacheDirectory: true,
+			plugins: ['transform-class-properties', 'transform-object-rest-spread']
+	}
+}, {
+		test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
+		loader: 'url-loader'
+}, {
+		test: /\.s?css$/,
+		include: [/node_modules/],
+		use: [
+		'style-loader',
+		'css-loader'
+		]
+}, {
+		test: /\.html$/,
+		loader: 'html-loader'
+}, {
+		test: /\.s?css$/,
+		exclude: [/node_modules/],
+		use: [
+			'style-loader?sourceMap',
+			{
+				loader: 'css-loader',
+			},
+			'postcss-loader',
+			'sass-loader?sourcemap&sourceMapContents&outputStyle=expanded'
+		]
+}];
+
 /** Minify for production */
 if (env === 'production') {
 
@@ -91,7 +121,6 @@ if (env === 'production') {
 			warnings: false
 		}
 	}));
-	plugins.push(new DedupePlugin());
 	outputFile = `${outputFile}.min.[chunkhash].js`;
 	vendorOutputFile = "vendor.bundle.[chunkhash].js";
 	outputPath = `${__dirname}/dist/`;
@@ -114,25 +143,27 @@ if (env === 'production') {
 		archive.directory(`${outputPath}`, '');
 
 		archive.finalize();
-	}))
-
-} else if (env === 'deploy') {
+	}));
+}
+if (env === 'deploy') {
 	outputFile = `${outputFile}.js`;
 	vendorOutputFile = "vendor.bundle.js";
 	outputPath = `${config.LOCAL_OWA_FOLDER}${config.LOCAL_OWA_FOLDER.slice(-1) != '/' ? '/' : ''}${THIS_APP_ID}`;
 	devtool = 'source-map';
+}
 
-} else if (env === 'dev') {
-	outputFile = `${outputFile}.js`;
-	vendorOutputFile = "vendor.bundle.js";
-	outputPath = `${__dirname}/dist/`;
-	devtool = 'source-map';
+if (env === 'development') {	
+	outputFile = `${outputFile}.js`;	
+	vendorOutputFile = "vendor.bundle.js";	
+	outputPath = `${__dirname}/dist/`;	
+	devtool = 'eval-source-map';	
 }
 
 plugins.push(new BrowserSyncPlugin({
 	proxy: {
 		target: browserSyncTarget
-	}
+	},
+	reload: true
 }));
 
 plugins.push(new CommonsChunkPlugin({
@@ -154,22 +185,33 @@ plugins.push(new CopyWebpackPlugin([{
 	to: 'img/omrs-button.png'
 }]));
 
+plugins.push(new webpack.ProvidePlugin({
+    React: 'react',
+}));
+
+plugins.push(new webpack.LoaderOptionsPlugin({
+    options: {
+      postcss: [
+        autoprefixer({
+          browsers: ['last 3 version', 'ie >= 11']
+        })
+      ]
+    }
+}));
 
+console.log('outputPath', outputPath);
 
 var webpackConfig = {
-	quiet: false,
 	entry: {
 		app: `${__dirname}/app/js/openmrs-owa-orderentry`,
 		css: `${__dirname}/app/css/openmrs-owa-orderentry.scss`,
 		vendor: [
-
-
-
-			'react'
-
-			, 'redux', 'redux-promise-middleware', 'redux-thunk', 'react-redux'
-
-
+			'react',
+			'redux',
+			'redux-promise-middleware',
+			'redux-thunk',
+			'react-redux',
+			'redux-saga'
 		]
 	},
 	devtool: devtool,
@@ -178,33 +220,13 @@ var webpackConfig = {
 		path: outputPath,
 		filename: '[name]' + outputFile,
 	},
+	target: 'web',
 	module: {
-		loaders: [{
-			test: /\.jsx?$/,
-			loader: 'babel-loader',
-			exclude: /node_modules/,
-			query: {
-				presets: ['env', 'react'],
-				cacheDirectory: true,
-				plugins: ['transform-class-properties', 'transform-object-rest-spread']
-			}
-		}, {
-			test: /\.css$/,
-			loader: 'style-loader!css-loader'
-		}, {
-			  test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
-			loader: 'url'
-		}, {
-			test: /\.html$/,
-			loader: 'html'
-		}, {
-			test: /\.scss$/,
-			loaders: ["style-loader", "css-loader", "sass-loader"]
-	}],
+		rules
 	},
 	resolve: {
-		root: path.resolve('./src'),
-		extensions: ['', '.js', '.jsx'],
+		modules: [path.resolve(__dirname), 'node_modules'],
+		extensions: ['.js', '.jsx', '.css', '.scss'],
 	},
 	plugins,
 	externals: nodeModules,