chg: dev: massive refactor on front-end - and remove unnecessary deps #4

webpack.config.js

@@ -4,59 +4,59 @@ var webpack = require('webpack');
 // Manually configure the runtime environment if not already configured yet by the "encore" command.
 // It's useful when you use tools that rely on webpack.config.js file.
 if (!Encore.isRuntimeEnvironmentConfigured()) {
-    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
 }
 
 // the project directory where compiled assets will be stored
 Encore
-    .setOutputPath('public/build/')
-    // the public path used by the web server to access the previous directory
-    .setPublicPath('/build')
+  .setOutputPath('public/build/')
+// the public path used by the web server to access the previous directory
+  .setPublicPath('/build')
 
-    // .cleanupOutputBeforeBuild()
-    .enableBuildNotifications()
-    .enableSourceMaps(!Encore.isProduction())
-    // uncomment to create hashed filenames (e.g. app.abc123.css)
-    .enableVersioning(Encore.isProduction())
+// .cleanupOutputBeforeBuild()
+  .enableBuildNotifications()
+  .enableSourceMaps(!Encore.isProduction())
+// uncomment to create hashed filenames (e.g. app.abc123.css)
+  .enableVersioning(Encore.isProduction())
 
-    // .copyFiles([
-    //     {from: './public/bundles/goswebsocket/', to: '/[path][name].[ext]', pattern: /\.(js|css|map)$/, includeSubdirectories: false},
-    // ])
+// .copyFiles([
+//     {from: './public/bundles/goswebsocket/', to: '/[path][name].[ext]', pattern: /\.(js|css|map)$/, includeSubdirectories: false},
+// ])
 
-    // uncomment to define the assets of the project
-    // .addEntry('js/app', './assets/js/app.js')
-    // .addStyleEntry('css/app', './assets/css/app.scss')
+// uncomment to define the assets of the project
+// .addEntry('js/app', './assets/js/MineSeeker.js')
+// .addStyleEntry('css/app', './assets/css/app.scss')
 
-    // .addEntry('mineseeker', ['babel-polyfill', './assets/js/mine-seeker.js'])
-    .addEntry('mineseeker', './assets/js/mine-seeker.js')
-    .addEntry('mineseekerStyle', './assets/css/style.mineseeker.scss')
-    .addEntry('homeStyle', './assets/css/style.layout.scss')
+// .addEntry('mineseeker', ['babel-polyfill', './assets/js/MineSeeker.js'])
+  .addEntry('mineseeker', './assets/js/app.jsx')
+  .addEntry('mineseekerStyle', './assets/css/style.mineseeker.scss')
+  .addEntry('homeStyle', './assets/css/style.layout.scss')
 
-    // uncomment if you use Sass/SCSS files
-    .enableSassLoader(options => {
-        options.api = 'modern';
-        options.sassOptions = { silenceDeprecations: ['import'] };
-    })
-    .configureCssLoader(options => {
-        // don't process absolute URLs (e.g. /images/...) — served by the web server
-        options.url = { filter: url => !url.startsWith('/') };
-    })
+// uncomment if you use Sass/SCSS files
+  .enableSassLoader(options => {
+    options.api = 'modern';
+    options.sassOptions = { silenceDeprecations: ['import'] };
+  })
+  .configureCssLoader(options => {
+    // don't process absolute URLs (e.g. /images/...) — served by the web server
+    options.url = { filter: url => !url.startsWith('/') };
+  })
 
-    // provide $/jQuery as global variables for Bootstrap 3 and legacy code
-    .addPlugin(new webpack.ProvidePlugin({
-        $: 'jquery',
-        jQuery: 'jquery',
-        'window.jQuery': 'jquery',
-    }))
+// provide $/jQuery as global variables for Bootstrap 3 and legacy code
+  .addPlugin(new webpack.ProvidePlugin({
+    $: 'jquery',
+    jQuery: 'jquery',
+    'window.jQuery': 'jquery',
+  }))
 
-    // .configureBabel(function (babelConfig) {
-    //     babelConfig.presets.push('env');
-    // })
+  .enableReactPreset()
+  .configureBabel(babelConfig => {
+    const idx = babelConfig.presets.findIndex(p => (Array.isArray(p) ? p[0] : p).includes('preset-react'));
+    if (-1 < idx) babelConfig.presets[idx] = [require.resolve('@babel/preset-react'), { runtime: 'automatic' }];
+  })
 
-    .enableReactPreset()
-
-    // .enableSingleRuntimeChunk()
-    .disableSingleRuntimeChunk()
+// .enableSingleRuntimeChunk()
+  .disableSingleRuntimeChunk()
 ;
 
 module.exports = Encore.getWebpackConfig();