improve webpack config for prod compile #23

.gitignore

@@ -36,3 +36,4 @@ phpunit-report/*
 
 nohup.out
 src/Mine/SeekerBundle/Resources/public/js/index.js
+src/Mine/SeekerBundle/Resources/public/js/index.min.js

README.md

@@ -19,7 +19,13 @@ This is a Symfony 3 project w/ React JS in standalone mode and w/ WebSocket.
 
 	2.) React JS WebPack watch generator w/ babel presets: es2015, react
 
+		$ webpack -p --config=webpack-prod.config.js
+
+			PROD
+
 		$ webpack --progress --colors --watch -d
 
+			DEV
+
 			-d -->	Debugger; If you write this line somewhere: debugger;
 				The browser will stop the code here!!!

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -21,10 +21,19 @@
     {{ parent() }}
     {{ ws_client() }}
 
-    {% javascripts filter='?uglifyjs2'
+    {% if env == 'dev' %}
-    '@MineSeekerBundle/Resources/public/js/node/howler/dist/howler.min.js'
+        {% javascripts filter='?uglifyjs2'
-    '@MineSeekerBundle/Resources/public/js/node/js-base64/base64.min.js'
+        '@MineSeekerBundle/Resources/public/js/node/howler/dist/howler.min.js'
-    '@MineSeekerBundle/Resources/public/js/index.js'%}
+        '@MineSeekerBundle/Resources/public/js/node/js-base64/base64.min.js'
-    <script type="text/javascript" src="{{ asset_url }}"></script>
+        '@MineSeekerBundle/Resources/public/js/index.js' %}
-    {% endjavascripts %}
+        <script type="text/javascript" src="{{ asset_url }}"></script>
+        {% endjavascripts %}
+    {% else %}
+        {% javascripts filter='?uglifyjs2'
+        '@MineSeekerBundle/Resources/public/js/node/howler/dist/howler.min.js'
+        '@MineSeekerBundle/Resources/public/js/node/js-base64/base64.min.js'
+        '@MineSeekerBundle/Resources/public/js/index.min.js' %}
+        <script type="text/javascript" src="{{ asset_url }}"></script>
+        {% endjavascripts %}
+    {% endif %}
 {% endblock %}

webpack-prod.config.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var webpack = require("webpack");
+process.env.NODE_ENV = 'production';
+var isProd = (process.env.NODE_ENV === 'production');
+
+/**
+ * Conditionally return a list of plugins to use based on the current environment.
+ * Repeat this pattern for any other config key (ie: loaders, etc).
+ * @returns {Array}
+ */
+function getPlugins() {
+    var plugins = [];
+
+    /**
+     * Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
+     * inside your code for any environment checks; UglifyJS will automatically
+     * drop any unreachable code.
+     */
+    plugins.push(new webpack.DefinePlugin({
+        'process.env': {
+            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+        }
+    }));
+
+    /** Conditionally add plugins for Production builds. */
+    if (isProd) {
+        plugins.push(new webpack.optimize.UglifyJsPlugin());
+    } else {
+        /** Conditionally add plugins for Development */
+    }
+
+    return plugins;
+}
+
+const config = module.exports = {
+    entry: './web/bundles/mineseeker/js/mine-seeker.js',
+    output: {
+        path: './src/Mine/SeekerBundle/Resources/public/js',
+        filename: 'index.min.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: 'babel',
+                query: {
+                    presets: ['es2015', 'react']
+                }
+            }
+        ]
+    },
+    plugins: getPlugins()
+};
+
+module.exports = config;