update gatsby settings

packages/learn/gatsby-node.js

@@ -1,6 +1,4 @@
 require('dotenv').config();
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const { dasherize } = require('./utils');
 const { blockNameify } = require('./utils/blockNameify');
@@ -103,71 +101,58 @@ exports.createPages = ({ graphql, actions }) => {
   });
 };
 
-const webpack = require('webpack');
 const RmServiceWorkerPlugin = require('webpack-remove-serviceworker-plugin');
-const generateBabelConfig = require('gatsby/dist/utils/babel-config');
 
-exports.modifyWebpackConfig = ({ config, stage }) => {
-  const program = {
-    directory: __dirname,
-    browserslist: ['> 1%', 'last 2 versions', 'IE >= 9']
-  };
-
-  return generateBabelConfig(program, stage).then(babelConfig => {
-    config.removeLoader('js').loader('js', {
-      test: /\.jsx?$/,
-      /* eslint-disable max-len */
-      exclude: modulePath => {
-        return (
-          /node_modules/.test(modulePath) &&
-          !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
-            modulePath
-          )
-        );
-      },
-      /* eslint-enable max-len*/
-      loader: 'babel',
-      query: babelConfig
-    });
-    config.plugin('CopyWebpackPlugin', CopyWebpackPlugin, [
-      [
-        {
-          from: path.resolve(__dirname, './node_modules/monaco-editor/min/vs'),
-          to: 'vs'
+exports.onCreateWebpackConfig = ({ rules, plugins, actions }) => {
+  actions.setWebpackConfig({
+    module: {
+      rules: [rules.js({
+        /* eslint-disable max-len */
+        exclude: modulePath => {
+          return (
+            /node_modules/.test(modulePath) &&
+            !(/(ansi-styles|chalk|strict-uri-encode|react-freecodecamp-search)/).test(
+              modulePath
+            )
+          );
         }
+        /* eslint-enable max-len*/
+      })
       ]
-    ]);
-    config.plugin('DefinePlugin', webpack.DefinePlugin, [
-      {
+    },
+    node: {
+      fs: 'empty'
+    },
+    plugins: [
+      plugins.define({
         HOME_PATH: JSON.stringify(
           process.env.HOME_PATH || 'http://localhost:3000'
         ),
-        STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PULIC_KEY || '')
-      }
-    ]);
-    config.plugin('RemoveServiceWorkerPlugin', RmServiceWorkerPlugin, [
-      { filename: 'sw.js' }
-    ]);
+        STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PUBLIC_KEY || '')
+      }),
+      new RmServiceWorkerPlugin()
+    ]
   });
 };
-/* eslint-disable prefer-object-spread/prefer-object-spread */
-exports.modifyBabelrc = ({ babelrc }) =>
-  Object.assign({}, babelrc, {
-    plugins: babelrc.plugins.concat([
-      [
-        'transform-es2015-arrow-functions',
-        'transform-imports',
-        'transform-function-bind',
-        {
-          'react-bootstrap': {
-            transform: 'react-bootstrap/lib/${member}',
-            preventFullImport: true
-          },
-          lodash: {
-            transform: 'lodash/${member}',
-            preventFullImport: true
-          }
-        }
-      ]
-    ])
+
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPlugin({
+    name: '@babel/plugin-proposal-function-bind'
   });
+  actions.setBabelPlugin({
+    name: '@babel/plugin-proposal-export-default-from'
+  });
+  actions.setBabelPlugin({
+    name: 'babel-plugin-transform-imports',
+    options: {
+      'react-bootstrap': {
+        transform: 'react-bootstrap/lib/${member}',
+        preventFullImport: true
+      },
+      lodash: {
+        transform: 'lodash/${member}',
+        preventFullImport: true
+      }
+    }
+  });
+};