-
Notifications
You must be signed in to change notification settings - Fork 182
/
index.ts
286 lines (270 loc) · 7.87 KB
/
index.ts
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
/**
* This is the base webpack config for all OpenMRS 3.x modules.
*
* ## Usage
*
* You can use it as simply as
*
* ```ts
* module.exports = require('openmrs/default-webpack-config');
* ```
*
* or you can customize the configuration using merges and overrides
* like
*
* ```ts
* const config = require('openmrs/default-webpack-config');
* config.cssRuleConfig.rules = [myCustomRule];
* module.exports = config;
* ```
*
* ## Development
*
* Advice for working on this file:
*
* Don't use `yarn link` or symlinks to work on it.
*
* After you `yarn build --watch`, do something like
* `watch "cp -R dist /path/to/packages/esm-patient-chart-app/webpack"`
* and then change the webpack line from
* `module.exports = require('openmrs/default-webpack-config');`
* to
* `module.exports = require('./webpack');`
*
* This is because Webpack has unpredictable behavior when working with
* symlinked files, **even when using absolute paths**. You read that right.
* Telling Webpack to use `/a/b/c`? If the Webpack config is symlinked
* from `/d/e/`, then it *might* in *some cases* try to import `/d/e/c`.
*/
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import { resolve, dirname, basename } from "path";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import { DefinePlugin, container } from "webpack";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
import { StatsWriterPlugin } from "webpack-stats-plugin";
// eslint-disable-next-line no-restricted-imports
import { merge, mergeWith, isArray } from "lodash";
import { postProcessFile } from "./optimize";
import { inc } from "semver";
const production = "production";
const { ModuleFederationPlugin } = container;
function getFrameworkVersion() {
try {
const { version } = require("@openmrs/esm-framework/package.json");
return `^${version}`;
} catch {
return "4.x";
}
}
function makeIdent(name: string) {
if (name.indexOf("/") !== -1) {
name = name.substr(name.indexOf("/"));
}
if (name.endsWith("-app")) {
name = name.substr(0, name.length - 4);
}
return name;
}
function mergeFunction(objValue: any, srcValue: any) {
if (isArray(objValue)) {
return objValue.concat(srcValue);
}
}
function slugify(name) {
return name.replace(/[\/\-@]/g, "_");
}
/**
* This object will be merged into the webpack config.
* Array values will be concatenated with the existing array.
* Make sure to modify this object and not reassign it.
*/
export const overrides = {};
/**
* The keys of this object will override the top-level keys
* of the webpack config.
* Make sure to modify this object and not reassign it.
*/
export const additionalConfig = {};
/**
* This object will be merged into the webpack rule governing
* the loading of JS, JSX, TS, etc. files.
* Make sure to modify this object and not reassign it.
*/
export const scriptRuleConfig = {};
/**
* This object will be merged into the webpack rule governing
* the loading of CSS files.
* Make sure to modify this object and not reassign it.
*/
export const cssRuleConfig = {};
/**
* This object will be merged into the webpack rule governing
* the loading of SCSS files.
* Make sure to modify this object and not reassign it.
*/
export const scssRuleConfig = {};
/**
* This object will be merged into the webpack rule governing
* the loading of static asset files.
* Make sure to modify this object and not reassign it.
*/
export const assetRuleConfig = {};
export default (
env: Record<string, string>,
argv: Record<string, string> = {}
) => {
const root = process.cwd();
const {
name,
version,
peerDependencies,
browser,
main,
types,
} = require(resolve(root, "package.json"));
const mode = argv.mode || process.env.NODE_ENV || "development";
const filename = basename(browser || main);
const outDir = dirname(browser || main);
const srcFile = resolve(root, browser ? main : types);
const ident = makeIdent(name);
const frameworkVersion = getFrameworkVersion();
const cssLoader = {
loader: "css-loader",
options: {
modules: {
localIdentName: `${ident}__[name]__[local]___[hash:base64:5]`,
},
},
};
const baseConfig = {
// The only `entry` in the application is the app shell. Everything else is
// a Webpack Module Federation "remote." This ensures that there is always
// only one container context--i.e., if we had an entry point per module,
// WMF could get confused and not resolve shared dependencies correctly.
output: {
publicPath: "auto",
path: resolve(root, outDir),
hashFunction: "xxhash64",
},
module: {
rules: [
merge(
{
test: /\.m?(js|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: require.resolve("swc-loader"),
},
},
scriptRuleConfig
),
merge(
{
test: /\.css$/,
use: [require.resolve("style-loader"), cssLoader],
},
cssRuleConfig
),
merge(
{
test: /\.s[ac]ss$/i,
use: [
require.resolve("style-loader"),
cssLoader,
{
loader: require.resolve("sass-loader"),
options: { sassOptions: { quietDeps: true } },
},
],
},
scssRuleConfig
),
merge(
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset/resource",
},
assetRuleConfig
),
],
},
mode,
devtool:
mode === production ? "hidden-nosources-source-map" : "eval-source-map",
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
},
devMiddleware: {
writeToDisk: true,
},
static: [resolve(root, outDir)],
},
performance: {
hints: mode === production && "warning",
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: env && env.analyze ? "server" : "disabled",
}),
new DefinePlugin({
__VERSION__:
mode === production
? JSON.stringify(version)
: JSON.stringify(inc(version, "prerelease", "local")),
"process.env.FRAMEWORK_VERSION": JSON.stringify(frameworkVersion),
}),
new ModuleFederationPlugin({
// See `esm-app-shell/src/load-modules.ts` for an explanation of how modules
// get loaded into the application.
name,
library: { type: "var", name: slugify(name) },
filename,
exposes: {
"./start": srcFile,
},
shared: [
...Object.keys(peerDependencies),
"@openmrs/esm-framework/src/internal",
].reduce((obj, depName) => {
obj[depName] = {
requiredVersion: peerDependencies[depName] ?? false,
singleton: true,
import: depName,
shareKey: depName,
shareScope: "default",
};
return obj;
}, {}),
}),
new StatsWriterPlugin({
filename: `${filename}.buildmanifest.json`,
stats: {
all: false,
chunks: true,
},
}),
{
apply(compiler) {
compiler.hooks.afterEmit.tap("PostProcessPlugin", (compilation) => {
if (mode === "production") {
// only post-optimize the bundle in production mode
const fn = resolve(root, outDir, filename);
postProcessFile(fn);
}
});
},
},
],
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js", ".scss"],
alias: {
"@openmrs/esm-framework": "@openmrs/esm-framework/src/internal",
},
},
...overrides,
};
return mergeWith(baseConfig, additionalConfig, mergeFunction);
};