Merge pull request #59 from KevinMidboe/conf_webpack

Changed to now use a prod and a dev webpack config. Our prod config n…

client/package.json

@@ -6,9 +6,11 @@
   "author": "Kevin Midboe",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server --open --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
   },
   "dependencies": {
+    "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.4",
     "html-webpack-plugin": "^2.28.0",
     "path": "^0.12.7",
@@ -27,7 +29,8 @@
     "urijs": "^1.18.12",
     "webfontloader": "^1.6.28",
     "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.4.5"
+    "webpack-dev-server": "^2.4.5",
+    "webpack-merge": "^4.1.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

client/webpack.common.js

@@ -0,0 +1,34 @@
+/*
+* @Author: KevinMidboe
+* @Date:   2017-06-01 19:09:16
+* @Last Modified by:   KevinMidboe
+* @Last Modified time: 2017-10-24 21:55:41
+*/
+
+const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+	entry: {
+		app: './app/index.js',
+	},
+	plugins: [
+		new CleanWebpackPlugin(['dist']),
+		new HtmlWebpackPlugin({
+			template: './app/index.html',
+		})
+	],
+	 module: {
+	 	loaders: [
+	 		{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
+	 		{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
+	 	]
+	 },
+
+	output: {
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	}
+};
+

client/webpack.config.js

@@ -1,33 +0,0 @@
-/*
-* @Author: KevinMidboe
-* @Date:   2017-06-01 19:09:16
-* @Last Modified by:   KevinMidboe
-* @Last Modified time: 2017-09-02 15:51:52
-*/
-
-const path = require('path');
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
-	template: './app/index.html',
-	filename: 'index.html',
-	inject: 'body'
-})
-
-module.exports = {
-	entry: './app/index.js',
-	output: {
-		path: path.resolve('dist'),
-		filename: 'index_bundle.js'
-	},
-	devServer: {
-		headers: {'Access-Control-Allow-Origin': '*'}
-	},
-	module: {
-		loaders: [
-				{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
-				{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
-    	]
-  	},
-  	plugins: [HtmlWebpackPluginConfig]
-};

client/webpack.dev.js

@@ -0,0 +1,17 @@
+/*
+* @Author: KevinMidboe
+* @Date:   2017-06-01 19:09:16
+* @Last Modified by:   KevinMidboe
+* @Last Modified time: 2017-10-24 22:12:52
+*/
+
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+	devtool: 'inline-source-map',
+	devServer: {
+		contentBase: './dist',
+		headers: {'Access-Control-Allow-Origin': '*'}
+	}
+});;

client/webpack.prod.js

@@ -0,0 +1,28 @@
+/*
+* @Author: KevinMidboe
+* @Date:   2017-06-01 19:09:16
+* @Last Modified by:   KevinMidboe
+* @Last Modified time: 2017-10-24 22:26:29
+*/
+
+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const common = require('./webpack.common.js');
+var webpack = require('webpack')
+
+module.exports = merge(common, {
+	plugins: [
+		new UglifyJSPlugin(),
+		new HtmlWebpackPlugin({
+			template: './app/index.html',
+		 	title: 'Caching'
+		}),
+		new webpack.DefinePlugin({
+			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+		}),
+	],
+	output: {
+		filename: '[name].[chunkhash].js',
+	}
+});