-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
config-overrides.js
147 lines (134 loc) · 4.89 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
136
137
138
139
140
141
142
143
144
145
146
147
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = function override(config, env) {
// prevent chunking for all files
Object.assign(config.optimization, {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
default: false,
},
},
})
// prevent hashes for the JS files
Object.assign(config.output, { filename: 'static/js/[name].js' })
// prevent hashes for the CSS files
// search for the "MiniCssExtractPlugin" so we can remove the hashing in the filename
for (const plugin of config.plugins) {
if (!plugin || !plugin.constructor) {
// do nothing if the plugin is null
continue
}
if (plugin.constructor.name === 'MiniCssExtractPlugin') {
Object.assign(plugin.options, {
filename: 'static/css/[name].css',
})
delete plugin.options.chunkFilename
}
}
// Inline the source map during development for nice stack traces and
// correct logging filename:line values
config.devtool =
env.toLowerCase() === 'development' ? 'inline-source-map' : false
// minimize only the .min.js files and .min.cs files in development
// mode
for (const plugin of config.optimization.minimizer) {
if (!plugin || !plugin.constructor) {
// do nothing if the plugin is null
continue
}
if (
plugin.constructor.name === 'TerserPlugin' &&
env.toLowerCase() === 'development'
) {
Object.assign(plugin.options, { include: /\.min\.js$/ })
}
if (
plugin.constructor.name === 'OptimizeCssAssetsWebpackPlugin' &&
env.toLowerCase() === 'development'
) {
Object.assign(plugin.options, { assetNameRegExp: /\.min\.css$/ })
}
}
// Disable hot module reloading because Greasemonkey cannot handle it
// In Chromium-based browsers, the whole page will refresh on changes.
// In Firefox, nothing seems to happen.
config.plugins = config.plugins.filter(
(x) => !x || x.constructor.name !== 'HotModuleReplacementPlugin'
)
// Remove the CSS extract plugin in development because we want CSS
// injected directly in the greasemonkey script.
// In production, we have to use it to avoid a gnarly webpack bug.
// See ./src/global.d.ts and ./build.js for more details.
if (env.toLowerCase() === 'development') {
config.plugins = config.plugins.filter(
(x) => !x || x.constructor.name !== 'MiniCssExtractPlugin'
)
}
;(config.module.rules.find((x) => !!x.oneOf).oneOf || []).forEach((x) => {
if (
x.test &&
x.test.constructor === RegExp &&
'test.css'.match(x.test)
) {
try {
x.use = x.use.filter((y) => !y.loader.includes('css-extract'))
x.use.unshift(require.resolve('style-loader'))
} catch (e) {
// If we fail to replace a `css-extract` move on silently
// This will happen if, for example, it has already been replaced
}
}
// Same justification as above.
if (env.toLowerCase() === 'development') {
if (x.use) {
x.use = x.use.filter(
(y) =>
!y.loader ||
!y.loader.includes('mini-css-extract-plugin')
)
}
}
})
config.module.rules = [
...config.module.rules,
{
test: /\.md$/i,
type: 'asset/source',
},
]
// Make a globalThis shim to prevent webpack code from erroring when run in dev mode
config.output.globalObject = `(function() {
if (typeof globalThis === 'object') return globalThis;
Object.defineProperty(Object.prototype, '__magic__', {
get: function() {
return this;
},
configurable: true
});
__magic__.globalThis = __magic__; // lolwat
delete Object.prototype.__magic__;
return globalThis
}())`
// Don't bundle React and friends; we're loading them from a CDN
config.externals = {
...config.externals,
react: 'React',
'react-dom': 'ReactDOM',
'react-redux': 'ReactRedux',
'redux-logger': 'reduxLogger',
'@reduxjs/toolkit': 'RTK',
}
config.resolve = {
...config.resolve,
plugins: [...config.resolve.plugins, new TsconfigPathsPlugin()],
}
// In windows, native file watching does not seem to work when using
// Docker. Uncomment the below to enable polling-based file watching
// instead.
// config.watchOptions = {
// ...config.watchOptions,
// poll: true,
// ignored: /node_modules/,
// }
return config
}