This repository has been archived by the owner on Mar 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
config-overrides.js
135 lines (123 loc) · 4.27 KB
/
config-overrides.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
const paths = require("react-scripts/config/paths");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
// Export override function(s) via object
module.exports = {
webpack: override,
// You may also override the Jest config (used for tests) by adding property with 'jest' name below. See react-app-rewired library's docs for details
};
// Function to override the CRA webpack config
function override(config, env) {
// Remove MiniCssExtract loader
const cssRule = findRule(config.module.rules, cssRuleMatcher);
const sassRule = findRule(config.module.rules, sassRuleMatcher);
cssRule.use.splice(0, 1);
sassRule.use.splice(0, 1);
// Replace single entry point in the config with multiple ones
// Note: you may remove any property below except "popup" to exclude respective entry point from compilation
config.entry = {
popup: paths.appIndexJs,
// options: paths.appSrc + '/options',
// background: paths.appSrc + '/background',
content: paths.appSrc + "/content",
};
// Change output filename template to get rid of hash there
config.output.filename = "static/js/[name].js";
// Disable built-in SplitChunksPlugin
config.optimization.splitChunks = {
cacheGroups: { default: false },
};
// Disable runtime chunk addition for each entry point
config.optimization.runtimeChunk = false;
// Shared minify options to be used in HtmlWebpackPlugin constructor
const minifyOpts = {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
};
const isEnvProduction = env === "production";
// Custom HtmlWebpackPlugin instance for index (popup) page
const indexHtmlPlugin = new HtmlWebpackPlugin({
inject: true,
chunks: ["popup"],
template: paths.appHtml,
filename: "popup.html",
minify: isEnvProduction && minifyOpts,
});
// Replace original HtmlWebpackPlugin instance in config.plugins with the above one
config.plugins = replacePlugin(
config.plugins,
(name) => /HtmlWebpackPlugin/i.test(name),
indexHtmlPlugin
);
// Custom ManifestPlugin instance to cast asset-manifest.json back to old plain format
const manifestPlugin = new ManifestPlugin({
fileName: "asset-manifest.json",
});
// Replace original ManifestPlugin instance in config.plugins with the above one
config.plugins = replacePlugin(
config.plugins,
(name) => /ManifestPlugin/i.test(name),
manifestPlugin
);
// Remove MiniCssExtractPlugin instance in config.plugins
config.plugins = replacePlugin(
config.plugins,
(name) => /MiniCssExtractPlugin/i.test(name)
);
// Remove GenerateSW plugin from config.plugins to disable service worker generation
config.plugins = replacePlugin(config.plugins, (name) =>
/GenerateSW/i.test(name)
);
return config;
}
// Utility function to replace/remove specific plugin in a webpack config
function replacePlugin(plugins, nameMatcher, newPlugin) {
const i = plugins.findIndex((plugin) => {
return (
plugin.constructor &&
plugin.constructor.name &&
nameMatcher(plugin.constructor.name)
);
});
return i > -1
? plugins
.slice(0, i)
.concat(newPlugin || [])
.concat(plugins.slice(i + 1))
: plugins;
}
// Functions for finding webpack rules
const ruleChildren = (loader) =>
loader.use ||
loader.oneOf ||
(Array.isArray(loader.loader) && loader.loader) ||
[];
const findIndexAndRules = (rulesSource, ruleMatcher) => {
let result = undefined;
const rules = Array.isArray(rulesSource)
? rulesSource
: ruleChildren(rulesSource);
rules.some(
(rule, index) =>
(result = ruleMatcher(rule)
? { index, rules }
: findIndexAndRules(ruleChildren(rule), ruleMatcher))
);
return result;
};
const findRule = (rulesSource, ruleMatcher) => {
const { index, rules } = findIndexAndRules(rulesSource, ruleMatcher);
return rules[index];
};
const cssRuleMatcher = (rule) =>
rule.test && String(rule.test) === String(/\.css$/);
const sassRuleMatcher = (rule) =>
rule.test && String(rule.test) === String(/\.(scss|sass)$/);