diff --git a/.gitignore b/.gitignore index 9b50e4a..36f4d89 100644 --- a/.gitignore +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 0358210..85386f0 100644 --- a/README.md +++ b/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!!! diff --git a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig index f99498f..d16aca2 100644 --- a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig +++ b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig @@ -21,10 +21,19 @@ {{ parent() }} {{ ws_client() }} - {% 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.js'%} - - {% endjavascripts %} + {% if env == 'dev' %} + {% 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.js' %} + + {% 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' %} + + {% endjavascripts %} + {% endif %} {% endblock %} diff --git a/webpack-prod.config.js b/webpack-prod.config.js new file mode 100644 index 0000000..8fd6f70 --- /dev/null +++ b/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;