feat: delegate build scripts to edx/frontend-build (#257)

.env

@@ -0,0 +1,33 @@
+NODE_ENV=null
+ACCESS_TOKEN_COOKIE_NAME=null
+BASE_URL=null
+CREDENTIALS_BASE_URL=null
+CSRF_COOKIE_NAME=null
+CSRF_TOKEN_API_PATH=null
+ECOMMERCE_BASE_URL=null
+LANGUAGE_PREFERENCE_COOKIE_NAME=null
+LMS_BASE_URL=null
+LOGIN_URL=null
+LOGOUT_URL=null
+MARKETING_SITE_BASE_URL=null
+ORDER_HISTORY_URL=null
+REFRESH_ACCESS_TOKEN_ENDPOINT=null
+SEGMENT_KEY=null
+SITE_NAME=null
+USER_INFO_COOKIE_NAME=null
+APPLE_APP_STORE_URL=null
+CONTACT_URL=null
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=null
+ENTERPRISE_MARKETING_URL=null
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=null
+ENTERPRISE_MARKETING_UTM_SOURCE=null
+FACEBOOK_URL=null
+GOOGLE_PLAY_URL=null
+LINKED_IN_URL=null
+OPEN_SOURCE_URL=null
+PRIVACY_POLICY_URL=null
+REDDIT_URL=null
+SUPPORT_URL=null
+TERMS_OF_SERVICE_URL=null
+TWITTER_URL=null
+YOU_TUBE_URL=null

.env.development

@@ -0,0 +1,34 @@
+NODE_ENV='development'
+PORT=1995
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+BASE_URL='localhost:1995'
+CREDENTIALS_BASE_URL='http://localhost:18150'
+CSRF_COOKIE_NAME='csrftoken'
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
+LMS_BASE_URL='http://localhost:18000'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/login'
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+ORDER_HISTORY_URL='localhost:1996/orders'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+SEGMENT_KEY=null
+SITE_NAME='edX'
+USER_INFO_COOKIE_NAME='edx-user-info'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+CONTACT_URL='http://localhost:18000/contact'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='my_campaign'
+ENTERPRISE_MARKETING_UTM_SOURCE='edX profile'
+FACEBOOK_URL='https://www.facebook.com'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+LINKED_IN_URL='https://www.linkedin.com'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+REDDIT_URL='https://www.reddit.com'
+SUPPORT_URL='http://localhost:18000/support'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'

.env.test

@@ -0,0 +1,16 @@
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+BASE_URL='localhost:1995'
+CREDENTIALS_BASE_URL='http://localhost:18150'
+CSRF_COOKIE_NAME='csrftoken'
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
+LMS_BASE_URL='http://localhost:18000'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/login'
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+ORDER_HISTORY_URL='localhost:1996/orders'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+SEGMENT_KEY=null
+SITE_NAME='edX'
+USER_INFO_COOKIE_NAME='edx-user-info'

.eslintignore

@@ -2,3 +2,4 @@ coverage/*
 dist/
 node_modules/
 __mocks__/
+__snapshots__/

.eslintrc

@@ -1,34 +0,0 @@
-{
-  "extends": "eslint-config-edx",
-  "parser": "babel-eslint",
-  "rules": {
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          "webpack/*.js",
-          "**/*.test.jsx",
-          "**/*.test.js"
-        ]
-      }
-    ],
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340#issuecomment-338424908
-    "jsx-a11y/anchor-is-valid": [ "error", {
-      "components": [ "Link" ],
-      "specialLink": [ "to" ]
-    }],
-    "jsx-a11y/label-has-for": [ 2, {
-      "components": [ "label" ],
-      "required": {
-        "some": [ "nesting", "id" ]
-      },
-      "allowChildren": false
-    }]
-  },
-  "env": {
-    "jest": true
-  },
-  "globals": {
-    "newrelic": false
-  }
-}

Makefile

@@ -51,7 +51,7 @@ validate-no-uncommitted-package-lock-changes:
 
 npm-build:
 	rm -rf ./npm-dist
-	./node_modules/.bin/babel src/profile --out-dir npm-dist --source-maps --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js --copy-files
+	./node_modules/.bin/fedx-scripts babel src/profile --out-dir npm-dist --source-maps --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@find npm-dist -name '*.test.js*' -delete
 	@rm -rf ./npm-dist/__mocks__

babel.config.js

@@ -1,39 +0,0 @@
-/* eslint-disable */
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
-  plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-syntax-dynamic-import',
-    [
-      'transform-imports',
-      {
-        '@fortawesome/free-brands-svg-icons': {
-          transform: '@fortawesome/free-brands-svg-icons/${member}',
-          skipDefaultConversion: true,
-        },
-        '@fortawesome/free-regular-svg-icons': {
-          transform: '@fortawesome/free-regular-svg-icons/${member}',
-          skipDefaultConversion: true,
-        },
-        '@fortawesome/free-solid-svg-icons': {
-          transform: '@fortawesome/free-solid-svg-icons/${member}',
-          skipDefaultConversion: true,
-        },
-      },
-    ],
-  ],
-  env: {
-    i18n: {
-      plugins: [
-        [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-i18n',
-          },
-        ],
-      ],
-    },
-  },
-};

jest.config.js

@@ -0,0 +1,7 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('jest', {
+  setupFiles: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});

package.json

@@ -11,15 +11,15 @@
     "ie 11"
   ],
   "scripts": {
-    "build": "NODE_ENV=production BABEL_ENV=production webpack --config=webpack/webpack.prod.config.js",
+    "build": "fedx-scripts webpack",
     "npm-build": "make npm-build",
-    "lint": "eslint --ext .js --ext .jsx .",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
     "is-es5": "es-check es5 ./dist/*.js",
-    "semantic-release": "semantic-release",
+    "lint": "fedx-scripts eslint",
-    "snapshot": "jest --updateSnapshot",
+    "precommit": "npm run lint",
-    "start": "NODE_ENV=development BABEL_ENV=development webpack-dev-server --config=webpack/webpack.dev.config.js --progress",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
-    "test": "jest --coverage --passWithNoTests"
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
   "files": [
     "/npm-dist"
@@ -82,82 +82,15 @@
     "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.6.0",
+    "@edx/frontend-build": "^1.0.0",
-    "@babel/core": "7.6.0",
-    "@babel/plugin-proposal-class-properties": "7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/preset-env": "7.6.0",
-    "@babel/preset-react": "7.0.0",
-    "@svgr/webpack": "4.3.2",
-    "autoprefixer": "9.6.1",
-    "axios-mock-adapter": "1.16.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "24.9.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-react-intl": "4.1.16",
-    "babel-plugin-transform-imports": "2.0.0",
-    "clean-webpack-plugin": "0.1.19",
     "codecov": "3.1.0",
-    "copy-webpack-plugin": "4.6.0",
+    "enzyme": "^3.10.0",
-    "css-loader": "3.2.0",
+    "enzyme-adapter-react-16": "^1.14.0",
-    "cssnano": "4.1.10",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.14.0",
     "es-check": "5.0.0",
-    "eslint-config-edx": "4.0.4",
+    "glob": "^7.1.3",
-    "fetch-mock": "6.5.2",
+    "purgecss-webpack-plugin": "^1.6.0",
-    "file-loader": "1.1.11",
-    "glob": "7.1.3",
-    "html-webpack-harddisk-plugin": "0.2.0",
-    "html-webpack-new-relic-plugin": "1.1.0",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "0.14.3",
-    "identity-obj-proxy": "3.0.0",
-    "image-webpack-loader": "4.6.0",
-    "jest": "24.9.0",
-    "mini-css-extract-plugin": "0.4.5",
-    "new-relic-source-map-webpack-plugin": "1.2.0",
-    "node-sass": "4.12.0",
-    "postcss-loader": "3.0.0",
-    "postcss-rtl": "1.3.3",
-    "purgecss-webpack-plugin": "1.5.0",
-    "react-dev-utils": "9.0.3",
     "react-test-renderer": "16.9.0",
     "reactifex": "1.1.1",
-    "redux-mock-store": "1.5.3",
+    "redux-mock-store": "1.5.3"
-    "resolve-url-loader": "3.1.0",
-    "sass-loader": "6.0.7",
-    "semantic-release": "15.13.24",
-    "source-map-loader": "0.2.4",
-    "style-loader": "0.20.3",
-    "url-loader": "1.1.2",
-    "webpack": "4.29.2",
-    "webpack-bundle-analyzer": "3.3.2",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.1.14",
-    "webpack-merge": "4.2.1"
-  },
-  "jest": {
-    "rootDir": "./src",
-    "testURL": "http://localhost/",
-    "setupFiles": [
-      "./setupTest.js"
-    ],
-    "moduleNameMapper": {
-      "\\.svg": "<rootDir>/__mocks__/svgrMock.js",
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|scss)$": "identity-obj-proxy"
-    },
-    "collectCoverageFrom": [
-      "**/*.{js,jsx}"
-    ],
-    "coveragePathIgnorePatterns": [
-      "setupTest.js",
-      "index.jsx"
-    ],
-    "transformIgnorePatterns": [
-      "/node_modules/(?!((@edx/paragon)|(@edx/frontend-base))/).*/"
-    ]
   }
 }

src/__mocks__/fileMock.js

@@ -1 +0,0 @@
-module.exports = 'test-file-stub';

src/__mocks__/svgrMock.js

@@ -1 +0,0 @@
-module.exports = { ReactComponent: 'IconMock' };

src/setupTest.js

@@ -1,25 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import 'babel-polyfill';
 
 Enzyme.configure({ adapter: new Adapter() });
-
-// These configuration values are usually set in webpack's EnvironmentPlugin however
-// Jest does not use webpack so we need to set these so for testing
-process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
-process.env.BASE_URL = 'localhost:1995';
-process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
-process.env.CSRF_COOKIE_NAME = 'csrftoken';
-process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
-process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
-process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
-process.env.LMS_BASE_URL = 'http://localhost:18000';
-process.env.LOGIN_URL = 'http://localhost:18000/login';
-process.env.LOGOUT_URL = 'http://localhost:18000/login';
-process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
-process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
-process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
-process.env.SEGMENT_KEY = null;
-process.env.SITE_NAME = 'edX';
-process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';

webpack.prod.config.js

@@ -0,0 +1,21 @@
+const glob = require('glob');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-prod', {
+  plugins: [
+    // Scan files for class names and ids and remove unused css
+    new PurgecssPlugin({
+      paths: [].concat(
+        // Scan files in this app
+        glob.sync('src/**/*', { nodir: true }),
+        // Scan files in any edx frontend-component
+        glob.sync('node_modules/@edx/frontend-component*/**/*', { nodir: true }),
+        // Scan files in paragon
+        glob.sync('node_modules/@edx/paragon/**/*', { nodir: true }),
+      ),
+      // Protect react-css-transition class names
+      whitelistPatterns: [/-enter/, /-appear/, /-exit/],
+    }),
+  ],
+});

webpack/webpack.common.config.js

@@ -1,16 +0,0 @@
-// This is the common Webpack config. The dev and prod Webpack configs both
-// inherit config defined here.
-const path = require('path');
-
-module.exports = {
-  entry: {
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    publicPath: '/',
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-};

webpack/webpack.dev.config.js

@@ -1,173 +0,0 @@
-// This is the dev Webpack config. All settings here should prefer a fast build
-// time at the expense of creating larger, unoptimized bundles.
-
-const Merge = require('webpack-merge');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-const PostCssRtlPlugin = require('postcss-rtl');
-
-const commonConfig = require('./webpack.common.config.js');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'development',
-  devtool: 'eval-source-map',
-  entry: {
-    // enable react's custom hot dev client so we get errors reported in the browser
-    hot: require.resolve('react-dev-utils/webpackHotDevClient'),
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, '../footer'),
-          path.resolve(__dirname, '../header'),
-        ],
-        loader: 'babel-loader',
-        options: {
-          // Caches result of loader to the filesystem. Future builds will attempt to read from the
-          // cache to avoid needing to run the expensive recompilation process on each run.
-          cacheDirectory: true,
-        },
-      },
-      // We are not extracting CSS from the javascript bundles in development because extracting
-      // prevents hot-reloading from working, it increases build time, and we don't care about
-      // flash-of-unstyled-content issues in development.
-      {
-        test: /(.scss|.css)$/,
-        use: [
-          'style-loader', // creates style nodes from JS strings
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [PostCssRtlPlugin()],
-            },
-          },
-          {
-            loader: 'resolve-url-loader',
-          },
-          {
-            loader: 'sass-loader', // compiles Sass to CSS
-            options: {
-              sourceMap: true,
-              includePaths: [
-                path.join(__dirname, '../node_modules'),
-                path.join(__dirname, '../src'),
-              ],
-            },
-          },
-        ],
-      },
-      {
-        test: /.svg$/,
-        issuer: {
-          test: /\.jsx?$/,
-        },
-        loader: '@svgr/webpack',
-      },
-      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
-      // files it processes, which just base64 encodes them and inlines them in the javascript
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              optimizationlevel: 7,
-              mozjpeg: {
-                progressive: true,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: '65-90',
-                speed: 4,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
-  plugins: [
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-
-      // App configuration
-      ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
-      BASE_URL: 'localhost:1995',
-      CREDENTIALS_BASE_URL: 'http://localhost:18150',
-      CSRF_COOKIE_NAME: 'csrftoken',
-      CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
-      ECOMMERCE_BASE_URL: 'http://localhost:18130',
-      LANGUAGE_PREFERENCE_COOKIE_NAME: 'openedx-language-preference',
-      LMS_BASE_URL: 'http://localhost:18000',
-      LOGIN_URL: 'http://localhost:18000/login',
-      LOGOUT_URL: 'http://localhost:18000/login',
-      MARKETING_SITE_BASE_URL: 'http://localhost:18000',
-      ORDER_HISTORY_URL: 'localhost:1996/orders',
-      REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
-      SEGMENT_KEY: null,
-      SITE_NAME: 'edX',
-      USER_INFO_COOKIE_NAME: 'edx-user-info',
-
-      // ProfileFooter configuration
-      APPLE_APP_STORE_URL: 'https://www.apple.com/ios/app-store/',
-      CONTACT_URL: 'http://localhost:18000/contact',
-      ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM: 'Footer',
-      ENTERPRISE_MARKETING_URL: 'http://example.com',
-      ENTERPRISE_MARKETING_UTM_CAMPAIGN: 'my_campaign',
-      ENTERPRISE_MARKETING_UTM_SOURCE: 'edX profile',
-      FACEBOOK_URL: 'https://www.facebook.com',
-      GOOGLE_PLAY_URL: 'https://play.google.com/store',
-      LINKED_IN_URL: 'https://www.linkedin.com',
-      OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
-      PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
-      REDDIT_URL: 'https://www.reddit.com',
-      SUPPORT_URL: 'http://localhost:18000/support',
-      TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
-      TWITTER_URL: 'https://twitter.com',
-      YOU_TUBE_URL: 'https://www.youtube.com',
-    }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  // This configures webpack-dev-server which serves bundles from memory and provides live
-  // reloading.
-  devServer: {
-    host: '0.0.0.0',
-    port: 1995,
-    historyApiFallback: true,
-    hot: true,
-    inline: true,
-    publicPath: '/',
-  },
-});

webpack/webpack.prod.config.js

@@ -1,222 +0,0 @@
-// This is the prod Webpack config. All settings here should prefer smaller,
-// optimized bundles at the expense of a longer build time.
-const Merge = require('webpack-merge');
-const commonConfig = require('./webpack.common.config.js');
-const path = require('path');
-const glob = require('glob');
-const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const HtmlWebpackNewRelicPlugin = require('html-webpack-new-relic-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const PurgecssPlugin = require('purgecss-webpack-plugin');
-const NewRelicSourceMapPlugin = require('new-relic-source-map-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // eslint-disable-line prefer-destructuring
-const PostCssRtlPlugin = require('postcss-rtl');
-const PostCssAutoprefixerPlugin = require('autoprefixer');
-const CssNano = require('cssnano');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  output: {
-    filename: '[name].[chunkhash].js',
-    path: path.resolve(__dirname, '../dist'),
-  },
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, '../footer'),
-          path.resolve(__dirname, '../header'),
-        ],
-        loader: 'babel-loader',
-      },
-      {
-        test: /\.js$/,
-        use: ['source-map-loader'],
-        enforce: 'pre',
-      },
-      // Webpack, by default, includes all CSS in the javascript bundles. Unfortunately, that means:
-      // a) The CSS won't be cached by browsers separately (a javascript change will force CSS
-      // re-download).  b) Since CSS is applied asyncronously, it causes an ugly
-      // flash-of-unstyled-content.
-      //
-      // To avoid these problems, we extract the CSS from the bundles into separate CSS files that
-      // can be included as <link> tags in the HTML <head> manually.
-      //
-      // We will not do this in development because it prevents hot-reloading from working and it
-      // increases build time.
-      {
-        test: /(.scss|.css)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                PostCssRtlPlugin(),
-                PostCssAutoprefixerPlugin({ grid: true }),
-                CssNano(),
-              ],
-            },
-          },
-          {
-            loader: 'resolve-url-loader',
-          },
-          {
-            loader: 'sass-loader', // compiles Sass to CSS
-            options: {
-              sourceMap: true,
-              includePaths: [
-                path.join(__dirname, '../node_modules'),
-                path.join(__dirname, '../src'),
-              ],
-            },
-          },
-        ],
-      },
-      {
-        test: /.svg$/,
-        issuer: {
-          test: /\.jsx?$/,
-        },
-        loader: '@svgr/webpack',
-      },
-      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
-      // files it processes, which just base64 encodes them and inlines them in the javascript
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              optimizationlevel: 7,
-              mozjpeg: {
-                progressive: true,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: '65-90',
-                speed: 4,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  // New in Webpack 4. Replaces CommonChunksPlugin. Extract common modules among all chunks to one
-  // common chunk and extract the Webpack runtime to a single runtime chunk.
-  optimization: {
-    runtimeChunk: 'single',
-    splitChunks: {
-      chunks: 'all',
-    },
-  },
-  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
-  plugins: [
-    // Cleans the dist directory before each build
-    new CleanWebpackPlugin(['dist'], {
-      root: path.join(__dirname, '../'),
-    }),
-    // Writes the extracted CSS from each entry to a file in the output directory.
-    new MiniCssExtractPlugin({
-      filename: '[name].[chunkhash].css',
-    }),
-    // Scan files for class names and ids and remove unused css
-    new PurgecssPlugin({
-      paths: [].concat(
-        // Scan files in this app
-        glob.sync(`${path.resolve(__dirname, '../src')}/**/*`, { nodir: true }),
-        // Scan files in any edx frontend-component
-        glob.sync(`${path.resolve(__dirname, '../node_modules/@edx/frontend-component')}*/**/*`, { nodir: true }),
-        // Scan files in paragon
-        glob.sync(`${path.resolve(__dirname, '../node_modules/@edx/paragon')}/**/*`, { nodir: true }),
-      ),
-      // Protect react-css-transition class names
-      whitelistPatterns: [/-enter/, /-appear/, /-exit/],
-    }),
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production',
-
-      // App configuration
-      ACCESS_TOKEN_COOKIE_NAME: null,
-      BASE_URL: null,
-      CREDENTIALS_BASE_URL: null,
-      CSRF_COOKIE_NAME: 'csrftoken',
-      CSRF_TOKEN_API_PATH: null,
-      ECOMMERCE_BASE_URL: null,
-      LANGUAGE_PREFERENCE_COOKIE_NAME: null,
-      LMS_BASE_URL: null,
-      LOGIN_URL: null,
-      LOGOUT_URL: null,
-      MARKETING_SITE_BASE_URL: null,
-      ORDER_HISTORY_URL: null,
-      REFRESH_ACCESS_TOKEN_ENDPOINT: null,
-      SEGMENT_KEY: null,
-      SITE_NAME: null,
-      USER_INFO_COOKIE_NAME: null,
-
-      // ProfileFooter configuration
-      APPLE_APP_STORE_URL: null,
-      CONTACT_URL: null,
-      ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM: null,
-      ENTERPRISE_MARKETING_URL: null,
-      ENTERPRISE_MARKETING_UTM_CAMPAIGN: null,
-      ENTERPRISE_MARKETING_UTM_SOURCE: null,
-      FACEBOOK_URL: null,
-      GOOGLE_PLAY_URL: null,
-      LINKED_IN_URL: null,
-      OPEN_SOURCE_URL: null,
-      PRIVACY_POLICY_URL: null,
-      REDDIT_URL: null,
-      SUPPORT_URL: null,
-      TERMS_OF_SERVICE_URL: null,
-      TWITTER_URL: null,
-      YOU_TUBE_URL: null,
-    }),
-    new HtmlWebpackNewRelicPlugin({
-      // This plugin fixes an issue where the newrelic script will break if
-      //  not added directly to the HTML.
-      // We use non empty strings as defaults here to prevent errors for empty configs
-      license: process.env.NEW_RELIC_LICENSE_KEY || 'fake_app',
-      applicationID: process.env.NEW_RELIC_APP_ID || 'fake_license',
-    }),
-    new NewRelicSourceMapPlugin({
-      applicationId: process.env.NEW_RELIC_APP_ID,
-      nrAdminKey: process.env.NEW_RELIC_ADMIN_KEY,
-      staticAssetUrl: process.env.BASE_URL,
-      noop: typeof process.env.NEW_RELIC_ADMIN_KEY === 'undefined', // upload source maps in prod builds only
-    }),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false,
-    }),
-  ],
-});