in app/build-config/craco.config.js [48:146]
function configureWebpack(config, { paths }) {
isUseBuildFolderOfDeps && assertAppDepsAreBuilt();
whenDev(() => { config.devtool = 'eval-source-map'; });
whenProd(() => {
// splitChunks setting hangs webpack5 dev server due to a bug.
// (that's why we apply it only to prod)
// see also the discussion here: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1808511
config.optimization.splitChunks = { chunks: 'all' };
});
if (isUseBuildFolderOfDeps) {
paths.appIndexJs = ENTRY_WITH_EXTRACTED_DEPS_CSS;
config.entry = ENTRY_WITH_EXTRACTED_DEPS_CSS;
}
// reason: no such use case in UUI.
removeRuleByTestAttr(config, /\.module\.css$/);
// reason: all .css files are not modules in UUI
changeRuleByTestAttr(config, /\.css$/, (r) => { delete r.exclude; return r; });
//
changeRuleByTestAttr(config, /\.svg$/, (prev) => {
delete prev.issuer; // deleting the issuer condition because of next bug: https://github.com/webpack/webpack/issues/9309
const fileLoader = prev.use.find((u) => { return u.loader.indexOf(makeSlashesPlatformSpecific('/file-loader/')) !== -1; });
fileLoader.options = { emitFile: false };
return prev;
});
if (!isUseBuildFolderOfDeps) {
/**
* This is Babel for our source files. We need to include sources of all our modules, not only "app/src".
*/
changeRuleByTestAttr(config, /\.(js|mjs|jsx|ts|tsx)$/, (r) => {
const include = [r.include, ...DIRS_FOR_BABEL.DEPS_SOURCES.INCLUDE];
const exclude = DIRS_FOR_BABEL.DEPS_SOURCES.EXCLUDE;
return Object.assign(r, { include, exclude });
});
}
// Fix for the issue when some modules have no source maps. see this discussion for details https://github.com/facebook/create-react-app/discussions/11767
changeRuleByTestAttr(config, /\.(js|mjs|jsx|ts|tsx|css)$/, (r) => Object.assign(r, { exclude: [r.exclude, ...LIBS_WITHOUT_SOURCE_MAPS] }));
changeRuleByTestAttr(config, /\.(scss|sass)$/, (prev) => {
normalizeUse(prev);
addShadowRootSupportToUse(prev);
return prev;
});
changeRuleByTestAttr(config, /\.css$/, (prev) => {
normalizeUse(prev);
addShadowRootSupportToUse(prev);
return prev;
});
// Reason: see below.
changeRuleByTestAttr(config, /\.module\.(scss|sass)$/, (prev) => {
if (prev.use) {
normalizeUse(prev);
addShadowRootSupportToUse(prev);
prev.use.forEach((u) => {
if (u.loader) {
if (u.loader.indexOf(makeSlashesPlatformSpecific('/resolve-url-loader/')) !== -1) {
// Set css root for "resolve-url-loader". So that url('...') statements in .scss are resolved correctly.
u.options.root = CSS_URL_ROOT_PATH;
}
if (u.loader.indexOf(makeSlashesPlatformSpecific('/css-loader/')) !== -1) {
// Need camelCase export to keep existing UUI code working
u.options.modules.exportLocalsConvention = 'camelCase';
}
}
});
}
return prev;
});
if (isUseBuildFolderOfDeps) {
config.resolve.mainFields = [
'epam:uui:main', 'browser', 'module', 'main',
];
}
changePluginByName(config, 'DefinePlugin', (plugin) => {
plugin.definitions.__COMMIT_HASH__ = `"${headCommitHash}"`;
plugin.definitions.__PACKAGE_VERSION__ = `"${UUI_VERSION}"`; // keep it in sync with rollup config replacements
plugin.definitions.__DEV__ = process.env.NODE_ENV !== 'production';
});
changePluginByName(config, 'HtmlWebpackPlugin', (plugin) => {
plugin.userOptions.isWrapUuiAppInShadowDom = isWrapUuiAppInShadowDom;
});
changePluginByName(config, 'ForkTsCheckerWebpackPlugin', (plugin) => {
// custom formatter can be removed when next bug is fixed:
// https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/789
plugin.options.formatter = uuiCustomFormatter;
if (!isUseBuildFolderOfDeps) {
plugin.options.issue.include = plugin.options.issue.include.concat(DIRS_FOR_BABEL.DEPS_SOURCES.INCLUDE);
}
});
return config;
}