Andal.LND/frontend-app-profile
6
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Butterworth
2019-09-25 11:54:49 -04:00
committed by GitHub
parent 5c38302eec
commit be67c13914
17 changed files with 3839 additions and 14877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.env Normal file
View File

@@ -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

34
.env.development Normal file
View File

@@ -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'

16
.env.test Normal file
View File

@@ -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'

1
.eslintignore
View File

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

34
.eslintrc
View File

@@ -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
}
}

2
Makefile
View File

@@ -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__

39
babel.config.js
View File

@@ -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',
},
],
],
},
},
};

7
jest.config.js Normal file
View File

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

18002
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

93
package.json
View File

@@ -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 babel src --quiet > /dev/null",
"i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
"is-es5": "es-check es5 ./dist/*.js",
"semantic-release": "semantic-release",
"snapshot": "jest --updateSnapshot",
"start": "NODE_ENV=development BABEL_ENV=development webpack-dev-server --config=webpack/webpack.dev.config.js --progress",
"test": "jest --coverage --passWithNoTests"
"lint": "fedx-scripts eslint",
"precommit": "npm run lint",
"snapshot": "fedx-scripts jest --updateSnapshot",
"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",
"@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",
"@edx/frontend-build": "^1.0.0",
"codecov": "3.1.0",
"copy-webpack-plugin": "4.6.0",
"css-loader": "3.2.0",
"cssnano": "4.1.10",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"es-check": "5.0.0",
"eslint-config-edx": "4.0.4",
"fetch-mock": "6.5.2",
"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",
"glob": "^7.1.3",
"purgecss-webpack-plugin": "^1.6.0",
"react-test-renderer": "16.9.0",
"reactifex": "1.1.1",
"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))/).*/"
]
"redux-mock-store": "1.5.3"
}
}

1
src/__mocks__/fileMock.js
View File

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

1
src/__mocks__/svgrMock.js
View File

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

21
src/setupTest.js
View File

@@ -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';

21
webpack.prod.config.js Normal file
View File

@@ -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/],
}),
],
});

16
webpack/webpack.common.config.js
View File

@@ -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'],
},
};

173
webpack/webpack.dev.config.js
View File

@@ -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: '/',
},
});

222
webpack/webpack.prod.config.js
View File

@@ -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,
}),
],
});