365 lines
12 KiB
JavaScript
365 lines
12 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
/* eslint-env node */
|
|
|
|
require('@babel/register')({
|
|
extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
|
|
});
|
|
|
|
const path = require('path');
|
|
const webpack = require('webpack');
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
const SitemapPlugin = require('sitemap-webpack-plugin').default;
|
|
const CSPPlugin = require('csp-webpack-plugin');
|
|
const WebpackBar = require('webpackbar');
|
|
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
|
|
const EagerImportsPlugin = require('eager-imports-webpack-plugin').default;
|
|
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
|
const config = require('./config');
|
|
const SUPPORTED_LANGUAGES = Object.keys(require('app/i18n').default);
|
|
const { getCountriesList } = require('app/components/i18n/localeFlags');
|
|
const rootPath = path.resolve('./packages');
|
|
const outputPath = path.join(__dirname, 'build');
|
|
|
|
const isProduction = process.env.NODE_ENV === 'production';
|
|
const isAnalyze = process.argv.some((arg) => arg === '--analyze');
|
|
|
|
const isDockerized = !!process.env.DOCKERIZED;
|
|
const isStorybook = process.env.APP_ENV === 'storybook';
|
|
const isCI = !!process.env.CI;
|
|
const isSilent = isCI || process.argv.some((arg) => /quiet/.test(arg));
|
|
const isCspEnabled = false;
|
|
const enableDll = !isProduction && !isStorybook;
|
|
const webpackEnv = isProduction ? 'production' : 'development';
|
|
|
|
process.env.NODE_ENV = webpackEnv;
|
|
|
|
const smp = new SpeedMeasurePlugin();
|
|
|
|
const webpackConfig = {
|
|
mode: webpackEnv,
|
|
|
|
cache: true,
|
|
|
|
entry: {
|
|
app: path.join(__dirname, 'packages/app'),
|
|
},
|
|
|
|
output: {
|
|
path: outputPath,
|
|
publicPath: '/',
|
|
filename: `[name].js?[${isProduction ? 'chunkhash' : 'hash'}]`,
|
|
},
|
|
|
|
resolve: {
|
|
modules: [rootPath, 'node_modules'],
|
|
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
|
|
alias: {
|
|
'react-dom': isProduction ? 'react-dom' : '@hot-loader/react-dom',
|
|
},
|
|
},
|
|
|
|
devtool: 'cheap-module-source-map',
|
|
|
|
stats: {
|
|
hash: false,
|
|
version: false,
|
|
timings: true,
|
|
assets: false,
|
|
chunks: false,
|
|
modules: false,
|
|
reasons: false,
|
|
children: false,
|
|
source: false,
|
|
errors: true,
|
|
errorDetails: true,
|
|
warnings: false,
|
|
publicPath: false,
|
|
},
|
|
|
|
plugins: [
|
|
new WebpackBar(),
|
|
new webpack.DefinePlugin({
|
|
'window.SENTRY_DSN': config.sentryDSN ? JSON.stringify(config.sentryDSN) : undefined,
|
|
'window.GA_ID': config.ga && config.ga.id ? JSON.stringify(config.ga.id) : undefined,
|
|
}),
|
|
new webpack.EnvironmentPlugin({
|
|
NODE_ENV: process.env.NODE_ENV,
|
|
__VERSION__: config.version || '',
|
|
}),
|
|
new HtmlWebpackPlugin({
|
|
template: 'packages/app/index.ejs',
|
|
favicon: 'packages/app/favicon.ico',
|
|
scripts: enableDll ? ['/dll/vendor.dll.js'] : [],
|
|
hash: false, // webpack does this for all our assets automagically
|
|
filename: 'index.html',
|
|
inject: false,
|
|
minify: {
|
|
collapseWhitespace: isProduction,
|
|
},
|
|
isCspEnabled,
|
|
}),
|
|
new SitemapPlugin(
|
|
'https://account.ely.by',
|
|
['/', '/register', '/resend-activation', '/activation', '/forgot-password', '/rules'],
|
|
{
|
|
lastMod: true,
|
|
changeFreq: 'weekly',
|
|
},
|
|
),
|
|
// restrict webpack import context, to create chunks only for supported locales
|
|
// @see services/i18n/intlPolyfill.js
|
|
new webpack.ContextReplacementPlugin(/locale-data/, new RegExp(`/(${SUPPORTED_LANGUAGES.join('|')})\\.js$`)),
|
|
// @see components/i18n/localeFlags.js
|
|
new webpack.ContextReplacementPlugin(
|
|
/flag-icon-css\/flags\/4x3/,
|
|
new RegExp(`/(${getCountriesList().join('|')})\\.svg`),
|
|
),
|
|
// @see components/i18n/localeFlags.js
|
|
new webpack.ContextReplacementPlugin(
|
|
/app\/components\/i18n\/flags/,
|
|
new RegExp(`/(${getCountriesList().join('|')})\\.svg`),
|
|
),
|
|
],
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.s?css$/,
|
|
use: [
|
|
{
|
|
loader: 'style-loader',
|
|
options: {
|
|
// style-loader@1.1.2 is still buggy. It breaks our icon styles
|
|
// (vertical align is broken and styles applied multiple times)
|
|
// so we can not use it and it's new `esModule` options
|
|
// esModule: true,
|
|
},
|
|
},
|
|
{
|
|
loader: 'css-loader',
|
|
options: {
|
|
modules: {
|
|
localIdentName: isProduction ? '[hash:base64:5]' : '[path][name]-[local]',
|
|
},
|
|
esModule: true,
|
|
importLoaders: 2,
|
|
sourceMap: !isProduction,
|
|
},
|
|
},
|
|
{
|
|
loader: 'sass-loader',
|
|
options: {
|
|
sourceMap: !isProduction,
|
|
},
|
|
},
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
sourceMap: !isProduction,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.[tj]sx?$/,
|
|
exclude: /node_modules/,
|
|
use: [
|
|
{
|
|
loader: 'babel-loader',
|
|
options: {
|
|
envName: `browser-${webpackEnv}`,
|
|
cacheDirectory: true,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.(png|gif|jpg|svg)$/,
|
|
loader: 'file-loader',
|
|
query: {
|
|
name: 'assets/[name].[ext]?[contenthash]',
|
|
},
|
|
},
|
|
{
|
|
test: /\.(woff|woff2|ttf)$/,
|
|
loader: 'file-loader',
|
|
query: {
|
|
name: 'assets/fonts/[name].[ext]?[contenthash]',
|
|
},
|
|
},
|
|
{
|
|
test: /\.html$/,
|
|
loader: 'html-loader',
|
|
},
|
|
{
|
|
// this is consumed by postcss-import
|
|
// @see postcss.config.js
|
|
test: /\.font\.(js|json)$/,
|
|
type: 'javascript/auto',
|
|
use: ['fontgen-loader'],
|
|
},
|
|
],
|
|
},
|
|
|
|
resolveLoader: {
|
|
alias: {
|
|
'fontgen-loader': path.resolve('./packages/webpack-utils/fontgen-loader'),
|
|
},
|
|
},
|
|
};
|
|
|
|
if (isAnalyze) {
|
|
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
|
|
}
|
|
|
|
if (isProduction) {
|
|
if (!isStorybook) {
|
|
let cssExtractApplied = false;
|
|
|
|
webpackConfig.module.rules.forEach((rule) => {
|
|
if (rule.use && (rule.use[0] === 'style-loader' || rule.use[0].loader === 'style-loader')) {
|
|
// replace `style-loader` with `MiniCssExtractPlugin`
|
|
rule.use[0] = MiniCssExtractPlugin.loader;
|
|
cssExtractApplied = true;
|
|
}
|
|
});
|
|
|
|
if (!cssExtractApplied) {
|
|
throw new Error('Can not locate style-loader to replace it with mini-css-extract-plugin loader');
|
|
}
|
|
|
|
webpackConfig.plugins.push(
|
|
new MiniCssExtractPlugin({
|
|
filename: '[name].css?[contenthash]',
|
|
}),
|
|
);
|
|
}
|
|
|
|
webpackConfig.devtool = 'hidden-source-map';
|
|
|
|
webpackConfig.optimization = {
|
|
moduleIds: 'hashed',
|
|
runtimeChunk: 'single',
|
|
splitChunks: {
|
|
cacheGroups: {
|
|
vendor: {
|
|
name: 'vendors',
|
|
priority: 0,
|
|
test: (m) => String(m.context).includes('node_modules'),
|
|
chunks: 'all',
|
|
},
|
|
polyfills: {
|
|
name: 'intl-polyfills',
|
|
priority: 1,
|
|
chunks: ({ name }) => ['intl', 'intl-pluralrules', 'intl-relativetimeformat'].includes(name),
|
|
enforce: true,
|
|
},
|
|
...SUPPORTED_LANGUAGES.reduce((acc, locale) => {
|
|
const localePolyfills = [
|
|
`intl-${locale}-js`,
|
|
`intl-pluralrules-${locale}-js`,
|
|
`intl-relativetimeformat-${locale}-js`,
|
|
];
|
|
|
|
acc[locale] = {
|
|
name: `locale-${locale}`,
|
|
priority: 1,
|
|
chunks: ({ name }) => name === `locale-${locale}-json`,
|
|
enforce: true,
|
|
};
|
|
acc[`${locale}Polyfill`] = {
|
|
name: `locale-${locale}-polyfill`,
|
|
priority: 2,
|
|
chunks: ({ name }) => localePolyfills.includes(name),
|
|
enforce: true,
|
|
};
|
|
|
|
return acc;
|
|
}, {}),
|
|
},
|
|
},
|
|
};
|
|
} else {
|
|
webpackConfig.plugins.push(
|
|
// force webpack to use mode: eager chunk imports in dev mode
|
|
// this will improve build performance
|
|
// this mode will be default for dev builds in webpack 5
|
|
new EagerImportsPlugin(),
|
|
);
|
|
|
|
if (enableDll) {
|
|
webpackConfig.plugins.push(
|
|
new webpack.DllReferencePlugin({
|
|
context: __dirname,
|
|
manifest: require('./dll/vendor.json'),
|
|
}),
|
|
);
|
|
}
|
|
|
|
webpackConfig.devServer = {
|
|
host: 'localhost',
|
|
port: 8080,
|
|
proxy: config.apiHost && {
|
|
'/api': {
|
|
target: config.apiHost,
|
|
changeOrigin: true, // add host http-header, based on target
|
|
secure: false, // allow self-signed certs
|
|
},
|
|
},
|
|
hot: true,
|
|
inline: true,
|
|
historyApiFallback: true,
|
|
};
|
|
}
|
|
|
|
if (isCspEnabled) {
|
|
webpackConfig.plugins.push(
|
|
new CSPPlugin({
|
|
'default-src': "'none'",
|
|
'style-src': ["'self'", "'unsafe-inline'"],
|
|
'script-src': [
|
|
"'self'",
|
|
"'nonce-edge-must-die'",
|
|
"'unsafe-inline'",
|
|
'https://www.google-analytics.com',
|
|
'https://recaptcha.net/recaptcha/',
|
|
'https://www.gstatic.com/recaptcha/',
|
|
'https://www.gstatic.cn/recaptcha/',
|
|
],
|
|
'img-src': ["'self'", 'data:', 'www.google-analytics.com'],
|
|
'font-src': ["'self'", 'data:'],
|
|
'connect-src': ["'self'", 'https://sentry.ely.by'].concat(isProduction ? [] : ['ws://localhost:8080']),
|
|
'frame-src': ['https://www.google.com/recaptcha/', 'https://recaptcha.net/recaptcha/'],
|
|
'report-uri': 'https://sentry.ely.by/api/2/csp-report/?sentry_key=088e7718236a4f91937a81fb319a93f6',
|
|
}),
|
|
);
|
|
}
|
|
|
|
if (isDockerized) {
|
|
webpackConfig.watchOptions = {
|
|
poll: 2000,
|
|
};
|
|
webpackConfig.devServer.host = '0.0.0.0';
|
|
}
|
|
|
|
if (isSilent) {
|
|
webpackConfig.stats = {
|
|
hash: false,
|
|
version: false,
|
|
timings: true,
|
|
assets: false,
|
|
chunks: false,
|
|
modules: false,
|
|
reasons: false,
|
|
children: false,
|
|
source: false,
|
|
errors: true,
|
|
errorDetails: true,
|
|
warnings: false,
|
|
publicPath: false,
|
|
};
|
|
}
|
|
|
|
module.exports = smp.wrap(webpackConfig);
|