diff --git a/lib/pipeline/webpack.config.js b/lib/pipeline/webpack.config.js index bf65c86c..644eb2ef 100644 --- a/lib/pipeline/webpack.config.js +++ b/lib/pipeline/webpack.config.js @@ -110,12 +110,25 @@ const base = { alias: embarkAliases } ], + 'babel-plugin-macros', + '@babel/plugin-transform-destructuring', + [ + '@babel/plugin-proposal-class-properties', { + loose: true + } + ], + [ + '@babel/plugin-proposal-object-rest-spread', { + useBuiltIns: true + } + ], [ '@babel/plugin-transform-runtime', { corejs: 2, useESModules: true } - ] + ], + '@babel/plugin-syntax-dynamic-import' ].map(resolve), presets: [ [ @@ -126,7 +139,11 @@ const base = { } } ], - '@babel/preset-react' + [ + '@babel/preset-react', { + useBuiltIns: true + } + ] ].map(resolve) } } @@ -149,6 +166,13 @@ const base = { profile: true, stats: 'verbose', resolve: { alias: embarkAliases, + extensions: [ + // webpack defaults + // see: https://webpack.js.org/configuration/resolve/#resolve-extensions + '.wasm', '.mjs', '.js', '.json', + // additional extensions + '.jsx' + ], modules: [ ...versions, 'node_modules', @@ -163,6 +187,20 @@ const base = { } }; +const baseBabelLoader = base.module.rules[3]; + +// Flow +// ----------------------------------------------------------------------------- + +// should be false in configs that have isTypeScriptEnabled = true +const isFlowEnabled = true; +if (isFlowEnabled) { + // position @babel/plugin-transform-flow-strip-types per babel-preset-react-app + baseBabelLoader.options.plugins.unshift( + require.resolve('@babel/plugin-transform-flow-strip-types') + ); +} + // development config // ----------------------------------------------------------------------------- @@ -175,6 +213,10 @@ development.mode = 'development'; development.name = 'development'; const devBabelLoader = development.module.rules[3]; devBabelLoader.options.compact = false; +// enable 'development' option for @babel/preset-react +const devPresetReact = devBabelLoader.options.presets[1]; +const devPresetReactOptions = devPresetReact[1]; +devPresetReactOptions.development = true; // production config // ----------------------------------------------------------------------------- @@ -182,6 +224,14 @@ devBabelLoader.options.compact = false; const production = cloneDeep(base); production.mode = 'production'; production.name = 'production'; +const prodBabelLoader = production.module.rules[3]; +// position babel-plugin-transform-react-remove-prop-types per babel-preset-react-app +prodBabelLoader.options.plugins.splice(prodBabelLoader.length - 1, 0, [ + require.resolve('babel-plugin-transform-react-remove-prop-types'), + { + removeImport: true + } +]); // compression of webpack's JS output not enabled by default // production.plugins.push(new CompressionPlugin());