arui-scripts 13.2.0-feat-babel-config-update.1 → 13.2.1

package/README.md

@@ -64,6 +64,7 @@ npm install arui-scripts --save-dev
 - `clientPolyfillsEntry` - точка входа для полифилов. Будет подключаться до основной точки входа. По умолчанию подтягивает полифилы из `arui-feather`, если он установлен.
 - `clientEntry` - точка входа для клиентского приложения. По умолчанию `src/index.js`.
 - `useServerHMR` - использовать ли HotModuleReplacement для сервера. По умолчанию `false`.
+- `webpack4Compatibility` - включить ли режим совместимости с webpack 4. По умолчанию `false`. Подробнее можно почитать в [этом issue](https://github.com/webpack/webpack/issues/14580).
 - `clientServerPort` - порт WebpackDevServer и nginx итогового контейнера. По умолчанию `8080`.
 - `serverPort` - порт нодового сервера. Нужен для правильного проксирования запросов от дев сервера и nginx. По умолчанию `3000`.
 - `installServerSourceMaps` - добавлять ли в серверную сборку пакет `source-map-support`. По умолчанию `false`.
@@ -72,6 +73,8 @@ npm install arui-scripts --save-dev
 - `keepPropTypes` - если `true`, пакеты с prop-types не будут удалены из production билда.
 - `debug` - режим отладки, в котором не выполняются некоторые нежелательные операции и выводится больше сообщений об ошибках, по умолчанию `false`.
 - `statsOutputFilename` - имя [stats-файла](https://webpack.js.org/api/stats/), которое будет использоваться в [bundle-analyze](#анализ-бандла) команде
+- `devSourceMaps` - какой вид source-map использовать в режиме разработки. По умолчанию `eval`. Эта настройка может сильно влиять на время сборки. Подробнее можно почитать [здесь](https://webpack.js.org/configuration/devtool/).
+**Внимание**. При использовании любых source-map на основании `eval` webpack-dev-server будет модифицировать заголовок `Content-Security-Policy` (при наличии) и добавлять в него `unsafe-eval`. [Подробнее тут](#dev-csp).
 - `useTscLoader` -  использовать ts-loader вместо babel-loader для обработки ts файлов. У babel-loader есть [ряд ограничений](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/). По умолчанию `false`.
 - `componentsTheme` - путь к css файлу с темой для [core-components](https://alfa-laboratory.github.io/core-components). Используется для настройки [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties#importfrom).
 - `keepCssVars` - отключает `postcss-custom-properties`, css переменные будут оставаться в бандле.
@@ -464,6 +467,15 @@ webpack и перезапустить сборку. Кеши хранятся в
 rm -rf ./node_modules/.cache
 ```
 
+<a name="dev-csp"></a>
+Модификация CSP для разработки
+---
+Если в дев-режиме используются любой тип source-map, основанный на eval (это дефолтное поведение) - то
+webpack-dev-server автоматически будет добавлять в CSP заголовок `script-src` значение `unsafe-eval` (при наличии заголовка).
+Это необходимо для того, чтобы код вообще запускался в браузере. Это не влияет на реальную безопасность приложения, так
+как используется ТОЛЬКО в дев-режиме. Если по каким-то причинам вас такое поведение не устраивает - вы можете поменять
+тип source-map на любой другой, не использующий eval.
+
 
 Анализ бандла
 ---

package/build/commands/start/server.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const webpack_1 = __importDefault(require("webpack"));
 const print_compiler_output_1 = __importDefault(require("./print-compiler-output"));
 const webpack_server_dev_1 = __importDefault(require("../../configs/webpack.server.dev"));
+const app_configs_1 = __importDefault(require("../../configs/app-configs"));
 const serverCompiler = webpack_1.default(webpack_server_dev_1.default);
 serverCompiler.hooks.compile.tap('server', () => console.log('Compiling server...'));
 serverCompiler.hooks.invalid.tap('server', () => console.log('Compiling server...'));
 serverCompiler.hooks.done.tap('server', (stats) => print_compiler_output_1.default('Server', stats));
-serverCompiler.watch({ aggregateTimeout: 100 }, () => { });
+serverCompiler.watch({
+    aggregateTimeout: 50,
+    ignored: new RegExp(app_configs_1.default.watchIgnorePath.join('|')),
+}, () => { });

package/build/commands/util/format-webpack-messages.d.ts

@@ -1,5 +1,11 @@
-export = formatWebpackMessages;
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 declare function formatWebpackMessages(json: any): {
     errors: any;
     warnings: any;
 };
+export default formatWebpackMessages;

package/build/commands/util/format-webpack-messages.js

@@ -5,6 +5,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+Object.defineProperty(exports, "__esModule", { value: true });
 // WARNING: this code is untranspiled and is used in browser too.
 // Please make sure any changes are in ES5 or contribute a Babel compile step.
 // Some custom utilities to prettify Webpack output.
@@ -89,4 +90,4 @@ function formatWebpackMessages(json) {
     }
     return result;
 }
-module.exports = formatWebpackMessages;
+exports.default = formatWebpackMessages;

package/build/configs/app-configs/available-package-settings.d.ts

@@ -2,7 +2,7 @@ import { AppConfigs } from './types';
 /**
  * Эти ключи из конфига будут обновляться из package.json при их наличии
  */
-export declare const availablePackageSettings: readonly ["dockerRegistry", "baseDockerImage", "serverEntry", "buildPath", "assetsPath", "additionalBuildPath", "nginxRootPath", "runFromNonRootUser", "archiveName", "serverOutput", "clientPolyfillsEntry", "clientEntry", "keepPropTypes", "useTscLoader", "useServerHMR", "clientServerPort", "serverPort", "debug", "statsOutputFilename", "componentsTheme", "keepCssVars", "removeDevDependenciesDuringDockerBuild"];
+export declare const availablePackageSettings: readonly ["dockerRegistry", "baseDockerImage", "serverEntry", "buildPath", "assetsPath", "additionalBuildPath", "nginxRootPath", "runFromNonRootUser", "archiveName", "serverOutput", "clientPolyfillsEntry", "clientEntry", "keepPropTypes", "devSourceMaps", "useTscLoader", "useServerHMR", "webpack4Compatibility", "clientServerPort", "serverPort", "debug", "statsOutputFilename", "componentsTheme", "keepCssVars", "removeDevDependenciesDuringDockerBuild"];
 declare type ArrayElementType<ArrayType extends ReadonlyArray<unknown>> = ArrayType[number];
 export declare type PackageSettings = Partial<Pick<AppConfigs, ArrayElementType<typeof availablePackageSettings>>>;
 export {};

package/build/configs/app-configs/available-package-settings.js

@@ -18,8 +18,10 @@ exports.availablePackageSettings = [
     'clientPolyfillsEntry',
     'clientEntry',
     'keepPropTypes',
+    'devSourceMaps',
     'useTscLoader',
     'useServerHMR',
+    'webpack4Compatibility',
     'clientServerPort',
     'serverPort',
     'debug',

package/build/configs/app-configs/calculate-dependent-config.d.ts

@@ -8,4 +8,6 @@ export declare function calculateDependentConfig(config: AppConfigs): AppConfigs
     clientOutputPath: string;
     clientPolyfillsEntry: string[];
     statsOutputPath: string;
+    watchIgnorePath: string[];
+    babelRuntimeVersion: string;
 };

package/build/configs/app-configs/calculate-dependent-config.js

@@ -4,19 +4,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateDependentConfig = void 0;
+const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
 const get_polyfills_1 = require("../util/get-polyfills");
+const resolve_1 = require("../util/resolve");
 /**
  * Обновление ключей конфига, зависящих от других. Это нужно делать в самый последний момент
  */
 function calculateDependentConfig(config) {
+    let babelRuntimeVersion;
+    try {
+        // В проекте может стоять babel/runtime отличный от того, что установлен как зависимость arui-scripts.
+        // При этом webpack будет резолвить babel/runtime относительно проекта, а не относительно arui-scripts.
+        // Поэтому мы читаем версию того babel/runtime, который установлен в проекте.
+        // Так же мы не можем использовать require для получения контента из babel/runtime/package.json,
+        // потому что webpack.cache будет ругаться на то, что мы пытаемся импортировать файлы НЕ из своего node_modules.
+        const pathToProjectBabelRuntime = resolve_1.resolveNodeModuleRelativeTo(config.cwd, '@babel/runtime/package.json');
+        babelRuntimeVersion = JSON.parse(fs_1.default.readFileSync(pathToProjectBabelRuntime, 'utf8')).version;
+    }
+    catch (e) {
+        babelRuntimeVersion = require('@babel/runtime/package.json').version;
+    }
     return lodash_merge_1.default(config, {
         publicPath: `${config.assetsPath}/`,
         serverOutputPath: path_1.default.resolve(config.cwd, config.buildPath),
         clientOutputPath: path_1.default.resolve(config.cwd, config.buildPath, config.assetsPath),
         clientPolyfillsEntry: get_polyfills_1.getPolyfills(config),
         statsOutputPath: path_1.default.resolve(config.cwd, config.buildPath, config.statsOutputFilename),
+        watchIgnorePath: ['node_modules', config.buildPath],
+        babelRuntimeVersion,
     });
 }
 exports.calculateDependentConfig = calculateDependentConfig;

package/build/configs/app-configs/get-defaults.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaults = void 0;
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
-const try_resolve_1 = require("../util/try-resolve");
+const resolve_1 = require("../util/resolve");
 function getDefaults() {
     const CWD = process.cwd();
     const appPackage = JSON.parse(fs_1.default.readFileSync(path_1.default.join(CWD, 'package.json'), 'utf8'));
@@ -17,7 +17,7 @@ function getDefaults() {
     const absoluteNodeModulesPath = path_1.default.resolve(CWD, 'node_modules');
     const projectTsConfigPath = path_1.default.join(CWD, 'tsconfig.json');
     const yarnLockFilePath = path_1.default.join(CWD, 'yarn.lock');
-    const overridesPath = try_resolve_1.tryResolve(path_1.default.join(CWD, 'arui-scripts.overrides'));
+    const overridesPath = resolve_1.tryResolve(path_1.default.join(CWD, 'arui-scripts.overrides'));
     const nginxConfFilePath = path_1.default.join(CWD, 'nginx.conf');
     const dockerfileFilePath = path_1.default.join(CWD, 'Dockerfile');
     return {
@@ -36,6 +36,7 @@ function getDefaults() {
         nginxRootPath: '/src',
         runFromNonRootUser: false,
         archiveName: 'build.tar',
+        babelRuntimeVersion: '7.0.0-beta.0',
         // server compilation configs
         serverEntry: path_1.default.resolve(absoluteSrcPath, 'server/index'),
         serverOutput: 'server.js',
@@ -47,8 +48,10 @@ function getDefaults() {
         tsconfig: fs_1.default.existsSync(projectTsConfigPath) ? projectTsConfigPath : null,
         localNginxConf: fs_1.default.existsSync(nginxConfFilePath) ? nginxConfFilePath : null,
         localDockerfile: fs_1.default.existsSync(dockerfileFilePath) ? dockerfileFilePath : null,
+        devSourceMaps: 'eval',
         useTscLoader: false,
         useServerHMR: false,
+        webpack4Compatibility: false,
         useYarn: fs_1.default.existsSync(yarnLockFilePath),
         clientServerPort: 8080,
         serverPort: 3000,
@@ -64,6 +67,7 @@ function getDefaults() {
         serverOutputPath: '',
         clientOutputPath: '',
         statsOutputPath: '',
+        watchIgnorePath: [],
     };
 }
 exports.getDefaults = getDefaults;

package/build/configs/app-configs/types.d.ts

@@ -13,6 +13,7 @@ export declare type AppConfigs = {
     nginxRootPath: string;
     runFromNonRootUser: boolean;
     archiveName: string;
+    babelRuntimeVersion: string;
     serverEntry: string | string[] | Record<string, string | string[]>;
     serverOutput: string;
     clientPolyfillsEntry: null | string | string[];
@@ -21,8 +22,10 @@ export declare type AppConfigs = {
     tsconfig: string | null;
     localNginxConf: string | null;
     localDockerfile: string | null;
+    devSourceMaps: string;
     useTscLoader: boolean;
     useServerHMR: boolean;
+    webpack4Compatibility: boolean;
     useYarn: boolean;
     clientServerPort: number;
     serverPort: number;
@@ -37,4 +40,5 @@ export declare type AppConfigs = {
     serverOutputPath: string;
     clientOutputPath: string;
     statsOutputPath: string;
+    watchIgnorePath: string[];
 };

package/build/configs/app-configs/update-with-config-file.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateWithConfigFile = void 0;
 const path_1 = __importDefault(require("path"));
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
-const try_resolve_1 = require("../util/try-resolve");
+const resolve_1 = require("../util/resolve");
 const validate_settings_keys_1 = __importDefault(require("./validate-settings-keys"));
 const available_package_settings_1 = require("./available-package-settings");
 function updateWithConfigFile(config) {
-    const appConfigPath = try_resolve_1.tryResolve(path_1.default.join(config.cwd, '/arui-scripts.config'));
+    const appConfigPath = resolve_1.tryResolve(path_1.default.join(config.cwd, '/arui-scripts.config'));
     if (appConfigPath) {
         let appSettings = require(appConfigPath);
         if (appSettings.__esModule) {

package/build/configs/app-configs/update-with-presets.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateWithPresets = void 0;
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
-const try_resolve_1 = require("../util/try-resolve");
+const resolve_1 = require("../util/resolve");
 const validate_settings_keys_1 = __importDefault(require("./validate-settings-keys"));
 const available_package_settings_1 = require("./available-package-settings");
 function updateWithPresets(config) {
@@ -13,8 +13,8 @@ function updateWithPresets(config) {
     if (!packageSettings.presets) {
         return config;
     }
-    const presetsConfigPath = try_resolve_1.tryResolve(`${packageSettings.presets}/arui-scripts.config`, { paths: [config.cwd] });
-    const presetsOverridesPath = try_resolve_1.tryResolve(`${packageSettings.presets}/arui-scripts.overrides`, { paths: [config.cwd] });
+    const presetsConfigPath = resolve_1.tryResolve(`${packageSettings.presets}/arui-scripts.config`, { paths: [config.cwd] });
+    const presetsOverridesPath = resolve_1.tryResolve(`${packageSettings.presets}/arui-scripts.overrides`, { paths: [config.cwd] });
     if (presetsConfigPath) {
         let presetsSettings = require(presetsConfigPath);
         if (presetsSettings.__esModule) {

package/build/configs/babel-client.js

@@ -41,7 +41,7 @@ const babelClientConfig = apply_overrides_1.default(['babel', 'babelClient'], {
                 // By default, babel assumes babel/runtime version 7.0.0-beta.0,
                 // explicitly resolving to match the provided helper functions.
                 // https://github.com/babel/babel/issues/10261
-                version: require('@babel/runtime/package.json').version,
+                version: app_configs_1.default.babelRuntimeVersion,
                 regenerator: true,
             }],
         require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),

package/build/configs/babel-dependencies.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.babelDependencies = void 0;
 const apply_overrides_1 = __importDefault(require("./util/apply-overrides"));
+const app_configs_1 = __importDefault(require("./app-configs"));
 exports.babelDependencies = apply_overrides_1.default('babelDependencies', {
     sourceType: 'unambiguous',
     presets: [
@@ -30,7 +31,7 @@ exports.babelDependencies = apply_overrides_1.default('babelDependencies', {
                 // By default, babel assumes babel/runtime version 7.0.0-beta.0,
                 // explicitly resolving to match the provided helper functions.
                 // https://github.com/babel/babel/issues/10261
-                version: require('@babel/runtime/package.json').version,
+                version: app_configs_1.default.babelRuntimeVersion,
                 regenerator: true,
             },
         ]

package/build/configs/dev-server.js

@@ -20,17 +20,22 @@ const devServerConfig = apply_overrides_1.default('devServer', {
     },
     static: [app_configs_1.default.serverOutputPath],
     proxy: Object.assign(app_configs_1.default.appPackage.proxy || {}, {
-        '/**': {
-            target: `http://localhost:${app_configs_1.default.serverPort}`,
-            bypass: (req) => {
+        '/**': Object.assign({ target: `http://localhost:${app_configs_1.default.serverPort}`, bypass: (req) => {
                 var _a;
                 const assetsRoot = path_1.default.normalize(`/${app_configs_1.default.publicPath}`).replace(/\\/g, '/');
                 if ((_a = req === null || req === void 0 ? void 0 : req.url) === null || _a === void 0 ? void 0 : _a.startsWith(assetsRoot)) {
                     return req.url;
                 }
                 return null;
+            } }, (app_configs_1.default.devSourceMaps.includes('eval') ? {
+            onProxyRes: (proxyRes) => {
+                const cspHeader = proxyRes.headers['content-security-policy'];
+                if (typeof cspHeader === 'string' && !cspHeader.includes('unsafe-eval')) {
+                    proxyRes.headers['content-security-policy'] = cspHeader
+                        .replace(/script-src/, "script-src 'unsafe-eval'");
+                }
             }
-        }
+        } : {}))
     })
 });
 exports.default = devServerConfig;

package/build/configs/util/resolve.d.ts

@@ -0,0 +1,12 @@
+export declare function tryResolve(...args: Parameters<typeof require.resolve>): string | undefined;
+/**
+ * Возвращает полный путь до модуля из node_modules относительно базового пути.
+ * Может быть полезно для определения пути до модуля, когда в проекте установлено сразу несколько модулей.
+ * /project
+ * --/node_modules
+ * ----/module1 // через эту функцию мы получим этот модуль
+ * ----/arui-scripts
+ * ------/node_modules
+ * --------/module1 // через require.resolve мы получим этот модуль
+ */
+export declare function resolveNodeModuleRelativeTo(basePath: string, moduleName: string): string;

package/build/configs/util/resolve.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveNodeModuleRelativeTo = exports.tryResolve = void 0;
+const path_1 = __importDefault(require("path"));
+function tryResolve(...args) {
+    try {
+        return require.resolve(...args);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+exports.tryResolve = tryResolve;
+/**
+ * Возвращает полный путь до модуля из node_modules относительно базового пути.
+ * Может быть полезно для определения пути до модуля, когда в проекте установлено сразу несколько модулей.
+ * /project
+ * --/node_modules
+ * ----/module1 // через эту функцию мы получим этот модуль
+ * ----/arui-scripts
+ * ------/node_modules
+ * --------/module1 // через require.resolve мы получим этот модуль
+ */
+function resolveNodeModuleRelativeTo(basePath, moduleName) {
+    return path_1.default.resolve(basePath, `node_modules/${moduleName}`);
+}
+exports.resolveNodeModuleRelativeTo = resolveNodeModuleRelativeTo;

package/build/configs/webpack.client.dev.js

@@ -37,8 +37,7 @@ function getSingleEntry(clientEntry) {
 const webpackClientDev = apply_overrides_1.default(['webpack', 'webpackClient', 'webpackDev', 'webpackClientDev'], {
     target: 'web',
     mode: 'development',
-    // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-    devtool: 'cheap-module-source-map',
+    devtool: app_configs_1.default.devSourceMaps,
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     entry: get_entry_1.default(app_configs_1.default.clientEntry, getSingleEntry),
@@ -257,8 +256,6 @@ const webpackClientDev = apply_overrides_1.default(['webpack', 'webpackClient',
             // Tell Webpack to provide empty mocks for process.env.
             'process.env': '{}'
         }),
-        // This is necessary to emit hot updates (currently CSS only):
-        new webpack_1.default.HotModuleReplacementPlugin(),
         new ReactRefreshWebpackPlugin({
             overlay: {
                 sockIntegration: 'whm',
@@ -285,9 +282,13 @@ const webpackClientDev = apply_overrides_1.default(['webpack', 'webpackClient',
         removeEmptyChunks: false,
         splitChunks: false
     },
+    experiments: {
+        backCompat: app_configs_1.default.webpack4Compatibility,
+    },
     // Без этого комиляция трирегилась на изменение в node_modules и приводила к утечке памяти
     watchOptions: {
-        ignored: /node_modules/,
+        ignored: new RegExp(app_configs_1.default.watchIgnorePath.join('|')),
+        aggregateTimeout: 100,
     }
 });
 exports.default = webpackClientDev;

package/build/configs/webpack.client.prod.js

@@ -332,5 +332,8 @@ const config = apply_overrides_1.default(['webpack', 'webpackClient', 'webpackPr
             new webpack_1.default.NormalModuleReplacementPlugin(/^react-style-proptype$/, noopPath),
             new webpack_1.default.NormalModuleReplacementPlugin(/^thrift-services\/proptypes/, noopPath)
         ])),
+    experiments: {
+        backCompat: app_configs_1.default.webpack4Compatibility,
+    },
 });
 exports.default = config;

package/build/configs/webpack.dll.dev.d.ts

@@ -0,0 +1,3 @@
+import type { Configuration as WebpackConfiguration } from 'webpack';
+declare const webpackDllDev: WebpackConfiguration;
+export default webpackDllDev;

package/build/configs/webpack.dll.dev.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const webpack_1 = __importDefault(require("webpack"));
+const app_configs_1 = __importDefault(require("./app-configs"));
+const postcss_1 = __importDefault(require("./postcss"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const getCSSModuleLocalIdent_1 = __importDefault(require("react-dev-utils/getCSSModuleLocalIdent"));
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const webpackDllDev = {
+    mode: 'development',
+    entry: {
+        vendor: ['react', 'react-dom', 'lodash']
+    },
+    module: {
+        rules: [
+            {
+                test: cssRegex,
+                exclude: cssModuleRegex,
+                use: [
+                    {
+                        loader: mini_css_extract_plugin_1.default.loader,
+                        options: { publicPath: './' }
+                    },
+                    {
+                        loader: require.resolve('css-loader'),
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: false,
+                        },
+                    },
+                    {
+                        loader: require.resolve('postcss-loader'),
+                        options: {
+                            // Necessary for external CSS imports to work
+                            // https://github.com/facebookincubator/create-react-app/issues/2677
+                            ident: 'postcss',
+                            plugins: () => postcss_1.default,
+                        },
+                    },
+                ],
+            },
+            {
+                test: cssModuleRegex,
+                use: [
+                    {
+                        loader: mini_css_extract_plugin_1.default.loader,
+                        options: { publicPath: './' }
+                    },
+                    {
+                        loader: require.resolve('css-loader'),
+                        options: {
+                            importLoaders: 1,
+                            sourceMap: false,
+                            modules: {
+                                getLocalIdent: getCSSModuleLocalIdent_1.default
+                            },
+                        },
+                    },
+                    {
+                        loader: require.resolve('postcss-loader'),
+                        options: {
+                            // Necessary for external CSS imports to work
+                            // https://github.com/facebookincubator/create-react-app/issues/2677
+                            ident: 'postcss',
+                            plugins: () => postcss_1.default,
+                        },
+                    },
+                ],
+            }
+        ],
+    },
+    output: {
+        filename: 'vendor.bundle.js',
+        path: app_configs_1.default.clientOutputPath,
+        library: 'vendor_lib'
+    },
+    plugins: [
+        new mini_css_extract_plugin_1.default(),
+        new webpack_1.default.DllPlugin({
+            name: 'vendor_lib',
+            path: path_1.default.join(app_configs_1.default.clientOutputPath, 'vendor-manifest.json')
+        })
+    ]
+};
+exports.default = webpackDllDev;

package/build/configs/webpack.server.dev.js

@@ -33,8 +33,7 @@ function getSingleEntry(entryPoint) {
 // The production configuration is different and lives in a separate file.
 const config = {
     mode: 'development',
-    // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-    devtool: 'cheap-module-source-map',
+    devtool: app_configs_1.default.devSourceMaps,
     target: 'node',
     node: {
         __filename: true,
@@ -233,6 +232,9 @@ const config = {
     performance: {
         hints: false,
     },
+    experiments: {
+        backCompat: app_configs_1.default.webpack4Compatibility,
+    },
     watchOptions: {
         ignored: /node_modules/,
     }

package/build/configs/webpack.server.prod.js

@@ -201,5 +201,8 @@ const config = apply_overrides_1.default(['webpack', 'webpackServer', 'webpackPr
         }),
         app_configs_1.default.tsconfig !== null && new fork_ts_checker_webpack_plugin_1.default()
     ].filter(Boolean)),
+    experiments: {
+        backCompat: app_configs_1.default.webpack4Compatibility,
+    },
 });
 exports.default = config;