@teambit/ui 0.0.565 → 0.0.569
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/compose.tsx +27 -0
- package/dist/ui-server.js +1 -2
- package/dist/ui-server.js.map +1 -1
- package/dist/webpack/webpack.dev.config.d.ts +1 -1
- package/dist/webpack/webpack.dev.config.js +17 -16
- package/dist/webpack/webpack.dev.config.js.map +1 -1
- package/events/index.ts +1 -0
- package/events/ui-server-started-event.ts +14 -0
- package/exceptions/index.ts +2 -0
- package/exceptions/unknown-build-error.ts +5 -0
- package/exceptions/unknown-ui.ts +9 -0
- package/package-tar/teambit-ui-0.0.569.tgz +0 -0
- package/package.json +24 -39
- package/render-lifecycle.tsx +56 -0
- package/ssr/render-middleware.ts +129 -0
- package/ssr/request-browser.ts +86 -0
- package/ssr/request-server.ts +10 -0
- package/ssr/ssr-content.ts +9 -0
- package/start.cmd.tsx +93 -0
- package/types/asset.d.ts +29 -0
- package/types/style.d.ts +42 -0
- package/ui/client-context.tsx +28 -0
- package/ui-build.cmd.tsx +27 -0
- package/ui-root.tsx +59 -0
- package/ui.cli.rt.tsx +10 -0
- package/ui.ui.runtime.tsx +277 -0
- package/webpack/html.ts +24 -0
- package/webpack/postcss.config.ts +22 -0
- package/webpack/webpack.base.config.ts +392 -0
- package/webpack/webpack.browser.config.ts +125 -0
- package/webpack/webpack.dev.config.ts +338 -0
- package/webpack/webpack.ssr.config.ts +38 -0
package/webpack/html.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/** fallback html template for the main UI, in case ssr is not active */
|
|
2
|
+
export function html(title: string, withDevTools?: boolean) {
|
|
3
|
+
return () => `
|
|
4
|
+
<!DOCTYPE html>
|
|
5
|
+
<html lang="en">
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
+
<title>${title}</title>
|
|
10
|
+
<script>
|
|
11
|
+
// Allow to use react dev-tools inside the examples
|
|
12
|
+
${
|
|
13
|
+
withDevTools
|
|
14
|
+
? ''
|
|
15
|
+
: 'try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}'
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="root"></div>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
23
|
+
`;
|
|
24
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
|
|
2
|
+
|
|
3
|
+
export const postCssConfig = {
|
|
4
|
+
// Necessary for external CSS imports to work
|
|
5
|
+
// https://github.com/facebook/create-react-app/issues/2677
|
|
6
|
+
ident: 'postcss',
|
|
7
|
+
plugins: [
|
|
8
|
+
// eslint-disable-next-line global-require
|
|
9
|
+
require.resolve('postcss-flexbugs-fixes'),
|
|
10
|
+
// eslint-disable-next-line global-require
|
|
11
|
+
require('postcss-preset-env')({
|
|
12
|
+
autoprefixer: {
|
|
13
|
+
flexbox: 'no-2009',
|
|
14
|
+
},
|
|
15
|
+
stage: 3,
|
|
16
|
+
}),
|
|
17
|
+
// Adds PostCSS Normalize as the reset css with default options,
|
|
18
|
+
// so that it honors browserslist config in package.json
|
|
19
|
+
// which in turn let's users customize the target behavior as per their needs.
|
|
20
|
+
require.resolve('postcss-normalize'),
|
|
21
|
+
],
|
|
22
|
+
};
|
|
@@ -0,0 +1,392 @@
|
|
|
1
|
+
import { merge } from 'lodash';
|
|
2
|
+
import webpack, { Configuration } from 'webpack';
|
|
3
|
+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
4
|
+
import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
|
|
5
|
+
import WorkboxWebpackPlugin from 'workbox-webpack-plugin';
|
|
6
|
+
import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
|
|
7
|
+
import path from 'path';
|
|
8
|
+
import * as stylesRegexps from '@teambit/webpack.modules.style-regexps';
|
|
9
|
+
import { generateStyleLoaders } from '@teambit/webpack.modules.generate-style-loaders';
|
|
10
|
+
import { postCssConfig } from './postcss.config';
|
|
11
|
+
|
|
12
|
+
const baseStyleLoadersOptions = {
|
|
13
|
+
injectingLoader: MiniCssExtractPlugin.loader,
|
|
14
|
+
cssLoaderPath: require.resolve('css-loader'),
|
|
15
|
+
postCssLoaderPath: require.resolve('postcss-loader'),
|
|
16
|
+
postCssConfig,
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const moduleFileExtensions = [
|
|
20
|
+
'web.mjs',
|
|
21
|
+
'mjs',
|
|
22
|
+
'web.js',
|
|
23
|
+
'js',
|
|
24
|
+
'web.ts',
|
|
25
|
+
'ts',
|
|
26
|
+
'web.tsx',
|
|
27
|
+
'tsx',
|
|
28
|
+
'json',
|
|
29
|
+
'web.jsx',
|
|
30
|
+
'jsx',
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
|
34
|
+
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
|
|
35
|
+
|
|
36
|
+
const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
|
|
37
|
+
|
|
38
|
+
const isEnvProduction = true;
|
|
39
|
+
|
|
40
|
+
// This is the production and development configuration.
|
|
41
|
+
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
|
|
42
|
+
// eslint-disable-next-line complexity
|
|
43
|
+
export default function createWebpackConfig(
|
|
44
|
+
workspaceDir: string,
|
|
45
|
+
entryFiles: string[],
|
|
46
|
+
publicDir = 'public'
|
|
47
|
+
): Configuration {
|
|
48
|
+
// Variable used for enabling profiling in Production
|
|
49
|
+
// passed into alias object. Uses a flag if passed into the build command
|
|
50
|
+
const isEnvProductionProfile = process.argv.includes('--profile');
|
|
51
|
+
|
|
52
|
+
// We will provide `paths.publicUrlOrPath` to our app
|
|
53
|
+
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
|
54
|
+
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
|
|
55
|
+
// Get environment variables to inject into our app.
|
|
56
|
+
// const env = getClientEnvironment(publicUrlOrPath.slice(0, -1));
|
|
57
|
+
|
|
58
|
+
return {
|
|
59
|
+
stats: {
|
|
60
|
+
children: true,
|
|
61
|
+
},
|
|
62
|
+
mode: 'production',
|
|
63
|
+
entry: {
|
|
64
|
+
main: entryFiles,
|
|
65
|
+
},
|
|
66
|
+
|
|
67
|
+
output: {
|
|
68
|
+
// The build folder.
|
|
69
|
+
path: path.join(workspaceDir, publicDir), // default value
|
|
70
|
+
|
|
71
|
+
filename: 'static/js/[name].[contenthash:8].js',
|
|
72
|
+
// TODO: remove this when upgrading to webpack 5
|
|
73
|
+
// futureEmitAssets: true,
|
|
74
|
+
// There are also additional JS chunk files if you use code splitting.
|
|
75
|
+
chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
|
|
76
|
+
// this defaults to 'window', but by setting it to 'this' then
|
|
77
|
+
// module chunks which are built will work in web workers as well.
|
|
78
|
+
// Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well
|
|
79
|
+
// globalObject: 'this',
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
resolve: {
|
|
83
|
+
// These are the reasonable defaults supported by the Node ecosystem.
|
|
84
|
+
// We also include JSX as a common component filename extension to support
|
|
85
|
+
// some tools, although we do not recommend using it, see:
|
|
86
|
+
// https://github.com/facebook/create-react-app/issues/290
|
|
87
|
+
// `web` extension prefixes have been added for better support
|
|
88
|
+
// for React Native Web.
|
|
89
|
+
extensions: moduleFileExtensions.map((ext) => `.${ext}`),
|
|
90
|
+
|
|
91
|
+
alias: {
|
|
92
|
+
// TODO: @uri please remember to remove after publishing evangelist and base-ui
|
|
93
|
+
react: require.resolve('react'),
|
|
94
|
+
'react-dom/server': require.resolve('react-dom/server'),
|
|
95
|
+
'react-dom': require.resolve('react-dom'),
|
|
96
|
+
// Allows for better profiling with ReactDevTools
|
|
97
|
+
...(isEnvProductionProfile && {
|
|
98
|
+
'react-dom$': 'react-dom/profiling',
|
|
99
|
+
'scheduler/tracing': 'scheduler/tracing-profiling',
|
|
100
|
+
}),
|
|
101
|
+
},
|
|
102
|
+
fallback: {
|
|
103
|
+
module: false,
|
|
104
|
+
path: require.resolve('path-browserify'),
|
|
105
|
+
dgram: false,
|
|
106
|
+
dns: false,
|
|
107
|
+
fs: false,
|
|
108
|
+
stream: false,
|
|
109
|
+
http2: false,
|
|
110
|
+
net: false,
|
|
111
|
+
tls: false,
|
|
112
|
+
child_process: false,
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
module: {
|
|
116
|
+
strictExportPresence: true,
|
|
117
|
+
rules: [
|
|
118
|
+
{
|
|
119
|
+
test: /\.m?js/,
|
|
120
|
+
resolve: {
|
|
121
|
+
fullySpecified: false,
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
// Disable require.ensure as it's not a standard language feature.
|
|
125
|
+
// { parser: { requireEnsure: false } },
|
|
126
|
+
{
|
|
127
|
+
// "oneOf" will traverse all following loaders until one will
|
|
128
|
+
// match the requirements. When no loader matches it will fall
|
|
129
|
+
// back to the "file" loader at the end of the loader list.
|
|
130
|
+
oneOf: [
|
|
131
|
+
// "postcss" loader applies autoprefixer to our CSS.
|
|
132
|
+
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
|
133
|
+
// "style" loader turns CSS into JS modules that inject <style> tags.
|
|
134
|
+
// In production, we use MiniCSSExtractPlugin to extract that CSS
|
|
135
|
+
// to a file, but in development "style" loader enables hot editing
|
|
136
|
+
// of CSS.
|
|
137
|
+
// By default we support CSS Modules with the extension .module.css
|
|
138
|
+
{
|
|
139
|
+
test: stylesRegexps.cssNoModulesRegex,
|
|
140
|
+
use: generateStyleLoaders(
|
|
141
|
+
merge({}, baseStyleLoadersOptions, {
|
|
142
|
+
cssLoaderOpts: {
|
|
143
|
+
importLoaders: 1,
|
|
144
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
145
|
+
},
|
|
146
|
+
})
|
|
147
|
+
),
|
|
148
|
+
// Don't consider CSS imports dead code even if the
|
|
149
|
+
// containing package claims to have no side effects.
|
|
150
|
+
// Remove this when webpack adds a warning or an error for this.
|
|
151
|
+
// See https://github.com/webpack/webpack/issues/6571
|
|
152
|
+
sideEffects: true,
|
|
153
|
+
},
|
|
154
|
+
// "url" loader works like "file" loader except that it embeds assets
|
|
155
|
+
// smaller than specified limit in bytes as data URLs to avoid requests.
|
|
156
|
+
// A missing `test` is equivalent to a match.
|
|
157
|
+
{
|
|
158
|
+
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
|
|
159
|
+
type: 'asset',
|
|
160
|
+
parser: {
|
|
161
|
+
dataUrlCondition: {
|
|
162
|
+
maxSize: imageInlineSizeLimit,
|
|
163
|
+
},
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
// Process application JS with Babel.
|
|
167
|
+
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
|
|
168
|
+
{
|
|
169
|
+
test: /\.(js|mjs|jsx|ts|tsx)$/,
|
|
170
|
+
loader: require.resolve('babel-loader'),
|
|
171
|
+
options: {
|
|
172
|
+
babelrc: false,
|
|
173
|
+
configFile: false,
|
|
174
|
+
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
|
|
175
|
+
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
|
176
|
+
// It enables caching results in ./node_modules/.cache/babel-loader/
|
|
177
|
+
// directory for faster rebuilds.
|
|
178
|
+
cacheDirectory: true,
|
|
179
|
+
// See #6846 for context on why cacheCompression is disabled
|
|
180
|
+
cacheCompression: false,
|
|
181
|
+
compact: isEnvProduction,
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
// Process any JS outside of the app with Babel.
|
|
185
|
+
// Unlike the application JS, we only compile the standard ES features.
|
|
186
|
+
// Probably not needed in our use case
|
|
187
|
+
// {
|
|
188
|
+
// test: /\.(js|mjs)$/,
|
|
189
|
+
// exclude: /@babel(?:\/|\\{1,2})runtime/,
|
|
190
|
+
// loader: require.resolve('babel-loader'),
|
|
191
|
+
// options: {
|
|
192
|
+
// babelrc: false,
|
|
193
|
+
// configFile: false,
|
|
194
|
+
// compact: false,
|
|
195
|
+
// presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
|
|
196
|
+
// cacheDirectory: true,
|
|
197
|
+
// // See #6846 for context on why cacheCompression is disabled
|
|
198
|
+
// cacheCompression: false,
|
|
199
|
+
|
|
200
|
+
// // Babel sourcemaps are needed for debugging into node_modules
|
|
201
|
+
// // code. Without the options below, debuggers like VSCode
|
|
202
|
+
// // show incorrect code and set breakpoints on the wrong lines.
|
|
203
|
+
// sourceMaps: shouldUseSourceMap,
|
|
204
|
+
// inputSourceMap: shouldUseSourceMap,
|
|
205
|
+
// },
|
|
206
|
+
// },
|
|
207
|
+
|
|
208
|
+
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
|
|
209
|
+
// using the extension .module.css
|
|
210
|
+
{
|
|
211
|
+
test: stylesRegexps.cssModuleRegex,
|
|
212
|
+
use: generateStyleLoaders(
|
|
213
|
+
merge({}, baseStyleLoadersOptions, {
|
|
214
|
+
cssLoaderOpts: {
|
|
215
|
+
importLoaders: 1,
|
|
216
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
217
|
+
modules: {
|
|
218
|
+
getLocalIdent: getCSSModuleLocalIdent,
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
|
|
222
|
+
})
|
|
223
|
+
),
|
|
224
|
+
},
|
|
225
|
+
// Opt-in support for SASS (using .scss or .sass extensions).
|
|
226
|
+
// By default we support SASS Modules with the
|
|
227
|
+
// extensions .module.scss or .module.sass
|
|
228
|
+
{
|
|
229
|
+
test: stylesRegexps.sassNoModuleRegex,
|
|
230
|
+
use: generateStyleLoaders(
|
|
231
|
+
merge({}, baseStyleLoadersOptions, {
|
|
232
|
+
cssLoaderOpts: {
|
|
233
|
+
importLoaders: 3,
|
|
234
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
235
|
+
},
|
|
236
|
+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
|
|
237
|
+
preProcessOptions: {
|
|
238
|
+
resolveUrlLoaderPath: require.resolve('resolve-url-loader'),
|
|
239
|
+
preProcessorPath: require.resolve('sass-loader'),
|
|
240
|
+
},
|
|
241
|
+
})
|
|
242
|
+
),
|
|
243
|
+
// Don't consider CSS imports dead code even if the
|
|
244
|
+
// containing package claims to have no side effects.
|
|
245
|
+
// Remove this when webpack adds a warning or an error for this.
|
|
246
|
+
// See https://github.com/webpack/webpack/issues/6571
|
|
247
|
+
sideEffects: true,
|
|
248
|
+
},
|
|
249
|
+
// Adds support for CSS Modules, but using SASS
|
|
250
|
+
// using the extension .module.scss or .module.sass
|
|
251
|
+
{
|
|
252
|
+
test: stylesRegexps.sassModuleRegex,
|
|
253
|
+
use: generateStyleLoaders(
|
|
254
|
+
merge({}, baseStyleLoadersOptions, {
|
|
255
|
+
cssLoaderOpts: {
|
|
256
|
+
importLoaders: 3,
|
|
257
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
258
|
+
modules: {
|
|
259
|
+
getLocalIdent: getCSSModuleLocalIdent,
|
|
260
|
+
},
|
|
261
|
+
},
|
|
262
|
+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
|
|
263
|
+
preProcessOptions: {
|
|
264
|
+
resolveUrlLoaderPath: require.resolve('resolve-url-loader'),
|
|
265
|
+
preProcessorPath: require.resolve('sass-loader'),
|
|
266
|
+
},
|
|
267
|
+
})
|
|
268
|
+
),
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
test: stylesRegexps.lessNoModuleRegex,
|
|
272
|
+
use: generateStyleLoaders(
|
|
273
|
+
merge({}, baseStyleLoadersOptions, {
|
|
274
|
+
cssLoaderOpts: {
|
|
275
|
+
importLoaders: 1,
|
|
276
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
277
|
+
},
|
|
278
|
+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
|
|
279
|
+
preProcessOptions: {
|
|
280
|
+
resolveUrlLoaderPath: require.resolve('resolve-url-loader'),
|
|
281
|
+
preProcessorPath: require.resolve('less-loader'),
|
|
282
|
+
},
|
|
283
|
+
})
|
|
284
|
+
),
|
|
285
|
+
// Don't consider CSS imports dead code even if the
|
|
286
|
+
// containing package claims to have no side effects.
|
|
287
|
+
// Remove this when webpack adds a warning or an error for this.
|
|
288
|
+
// See https://github.com/webpack/webpack/issues/6571
|
|
289
|
+
sideEffects: true,
|
|
290
|
+
},
|
|
291
|
+
{
|
|
292
|
+
test: stylesRegexps.lessModuleRegex,
|
|
293
|
+
use: generateStyleLoaders(
|
|
294
|
+
merge({}, baseStyleLoadersOptions, {
|
|
295
|
+
cssLoaderOpts: {
|
|
296
|
+
importLoaders: 1,
|
|
297
|
+
sourceMap: isEnvProduction || shouldUseSourceMap,
|
|
298
|
+
modules: {
|
|
299
|
+
getLocalIdent: getCSSModuleLocalIdent,
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,
|
|
303
|
+
preProcessOptions: {
|
|
304
|
+
resolveUrlLoaderPath: require.resolve('resolve-url-loader'),
|
|
305
|
+
preProcessorPath: require.resolve('less-loader'),
|
|
306
|
+
},
|
|
307
|
+
})
|
|
308
|
+
),
|
|
309
|
+
},
|
|
310
|
+
// "file" loader makes sure those assets get served by WebpackDevServer.
|
|
311
|
+
// When you `import` an asset, you get its (virtual) filename.
|
|
312
|
+
// In production, they would get copied to the `build` folder.
|
|
313
|
+
// This loader doesn't use a "test" so it will catch all modules
|
|
314
|
+
// that fall through the other loaders.
|
|
315
|
+
{
|
|
316
|
+
// Exclude `js` files to keep "css" loader working as it injects
|
|
317
|
+
// its runtime that would otherwise be processed through "file" loader.
|
|
318
|
+
// Also exclude `html` and `json` extensions so they get processed
|
|
319
|
+
// by webpacks internal loaders.
|
|
320
|
+
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.css$/],
|
|
321
|
+
type: 'asset/resource',
|
|
322
|
+
},
|
|
323
|
+
// ** STOP ** Are you adding a new loader?
|
|
324
|
+
// Make sure to add the new loader(s) before the "file" loader.
|
|
325
|
+
],
|
|
326
|
+
},
|
|
327
|
+
],
|
|
328
|
+
},
|
|
329
|
+
plugins: [
|
|
330
|
+
new MiniCssExtractPlugin({
|
|
331
|
+
// Options similar to the same options in webpackOptions.output
|
|
332
|
+
// both options are optional
|
|
333
|
+
filename: 'static/css/[name].[contenthash:8].css',
|
|
334
|
+
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
|
|
335
|
+
}),
|
|
336
|
+
// Generate an asset manifest file with the following content:
|
|
337
|
+
// - "files" key: Mapping of all asset filenames to their corresponding
|
|
338
|
+
// output file so that tools can pick it up without having to parse
|
|
339
|
+
// `index.html`
|
|
340
|
+
// can be used to reconstruct the HTML if necessary
|
|
341
|
+
new WebpackManifestPlugin({
|
|
342
|
+
fileName: 'asset-manifest.json',
|
|
343
|
+
generate: (seed, files, entrypoints) => {
|
|
344
|
+
const manifestFiles = files.reduce((manifest, file) => {
|
|
345
|
+
manifest[file.name] = file.path;
|
|
346
|
+
return manifest;
|
|
347
|
+
}, seed);
|
|
348
|
+
const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
|
|
349
|
+
|
|
350
|
+
// @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276
|
|
351
|
+
return {
|
|
352
|
+
files: manifestFiles,
|
|
353
|
+
entrypoints: entrypointFiles,
|
|
354
|
+
} as Record<string, string>;
|
|
355
|
+
},
|
|
356
|
+
}),
|
|
357
|
+
// Moment.js is an extremely popular library that bundles large locale files
|
|
358
|
+
// by default due to how webpack interprets its code. This is a practical
|
|
359
|
+
// solution that requires the user to opt into importing specific locales.
|
|
360
|
+
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
|
361
|
+
// You can remove this if you don't use Moment.js:
|
|
362
|
+
new webpack.IgnorePlugin({
|
|
363
|
+
resourceRegExp: /^\.\/locale$/,
|
|
364
|
+
contextRegExp: /moment$/,
|
|
365
|
+
}),
|
|
366
|
+
// Generate a service worker script that will precache, and keep up to date,
|
|
367
|
+
// the HTML & assets that are part of the webpack build.
|
|
368
|
+
isEnvProduction &&
|
|
369
|
+
new WorkboxWebpackPlugin.GenerateSW({
|
|
370
|
+
clientsClaim: true,
|
|
371
|
+
maximumFileSizeToCacheInBytes: 5000000,
|
|
372
|
+
exclude: [/\.map$/, /asset-manifest\.json$/],
|
|
373
|
+
// importWorkboxFrom: 'cdn',
|
|
374
|
+
navigateFallback: 'public/index.html',
|
|
375
|
+
navigateFallbackDenylist: [
|
|
376
|
+
// Exclude URLs starting with /_, as they're likely an API call
|
|
377
|
+
new RegExp('^/_'),
|
|
378
|
+
// Exclude any URLs whose last part seems to be a file extension
|
|
379
|
+
// as they're likely a resource and not a SPA route.
|
|
380
|
+
// URLs containing a "?" character won't be blacklisted as they're likely
|
|
381
|
+
// a route with query params (e.g. auth callbacks).
|
|
382
|
+
new RegExp('/[^/?]+\\.[^/]+$'),
|
|
383
|
+
],
|
|
384
|
+
}),
|
|
385
|
+
].filter(Boolean),
|
|
386
|
+
// Some libraries import Node modules but don't use them in the browser.
|
|
387
|
+
// Tell webpack to provide empty mocks for them so importing them works.
|
|
388
|
+
// Turn off performance processing because we utilize
|
|
389
|
+
// our own hints via the FileSizeReporter
|
|
390
|
+
performance: false,
|
|
391
|
+
};
|
|
392
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { Configuration } from 'webpack';
|
|
2
|
+
import TerserPlugin from 'terser-webpack-plugin';
|
|
3
|
+
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
|
6
|
+
import { merge } from 'webpack-merge';
|
|
7
|
+
|
|
8
|
+
import { html } from './html';
|
|
9
|
+
import createBaseConfig from './webpack.base.config';
|
|
10
|
+
|
|
11
|
+
export default function createWebpackConfig(
|
|
12
|
+
workspaceDir: string,
|
|
13
|
+
entryFiles: string[],
|
|
14
|
+
title: string,
|
|
15
|
+
publicDir: string
|
|
16
|
+
): Configuration {
|
|
17
|
+
const baseConfig = createBaseConfig(workspaceDir, entryFiles);
|
|
18
|
+
const browserConfig = createBrowserConfig(workspaceDir, title, publicDir);
|
|
19
|
+
|
|
20
|
+
const combined = merge(baseConfig, browserConfig);
|
|
21
|
+
|
|
22
|
+
return combined;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function createBrowserConfig(workspaceDir: string, title: string, publicDir: string) {
|
|
26
|
+
const browserConfig: Configuration = {
|
|
27
|
+
// target: 'web', // already default
|
|
28
|
+
|
|
29
|
+
output: {
|
|
30
|
+
path: path.resolve(workspaceDir, publicDir),
|
|
31
|
+
// webpack uses `publicPath` to determine where the app is being served from.
|
|
32
|
+
// It requires a trailing slash, or the file assets will get an incorrect path.
|
|
33
|
+
// We inferred the "public path" (such as / or /my-project) from homepage.
|
|
34
|
+
publicPath: '/',
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
optimization: {
|
|
38
|
+
minimize: true,
|
|
39
|
+
minimizer: [
|
|
40
|
+
// This is only used in production mode
|
|
41
|
+
new TerserPlugin({
|
|
42
|
+
terserOptions: {
|
|
43
|
+
parse: {
|
|
44
|
+
// We want terser to parse ecma 8 code. However, we don't want it
|
|
45
|
+
// to apply any minification steps that turns valid ecma 5 code
|
|
46
|
+
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
|
47
|
+
// sections only apply transformations that are ecma 5 safe
|
|
48
|
+
// https://github.com/facebook/create-react-app/pull/4234
|
|
49
|
+
ecma: 8,
|
|
50
|
+
},
|
|
51
|
+
compress: {
|
|
52
|
+
ecma: 5,
|
|
53
|
+
warnings: false,
|
|
54
|
+
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
|
55
|
+
// https://github.com/facebook/create-react-app/issues/2376
|
|
56
|
+
// Pending further investigation:
|
|
57
|
+
// https://github.com/mishoo/UglifyJS2/issues/2011
|
|
58
|
+
comparisons: false,
|
|
59
|
+
// Disabled because of an issue with Terser breaking valid code:
|
|
60
|
+
// https://github.com/facebook/create-react-app/issues/5250
|
|
61
|
+
// Pending further investigation:
|
|
62
|
+
// https://github.com/terser-js/terser/issues/120
|
|
63
|
+
inline: 2,
|
|
64
|
+
},
|
|
65
|
+
mangle: {
|
|
66
|
+
safari10: true,
|
|
67
|
+
},
|
|
68
|
+
output: {
|
|
69
|
+
ecma: 5,
|
|
70
|
+
comments: false,
|
|
71
|
+
// Turned on because emoji and regex is not minified properly using default
|
|
72
|
+
// https://github.com/facebook/create-react-app/issues/2488
|
|
73
|
+
ascii_only: true,
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
}),
|
|
77
|
+
new CssMinimizerPlugin({
|
|
78
|
+
minimizerOptions: {
|
|
79
|
+
preset: [
|
|
80
|
+
'default',
|
|
81
|
+
{
|
|
82
|
+
minifyFontValues: { removeQuotes: false },
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
}),
|
|
87
|
+
],
|
|
88
|
+
// Automatically split vendor and commons
|
|
89
|
+
// https://twitter.com/wSokra/status/969633336732905474
|
|
90
|
+
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
|
|
91
|
+
splitChunks: {
|
|
92
|
+
chunks: 'all',
|
|
93
|
+
name: false,
|
|
94
|
+
},
|
|
95
|
+
// Keep the runtime chunk separated to enable long term caching
|
|
96
|
+
// https://twitter.com/wSokra/status/969679223278505985
|
|
97
|
+
// https://github.com/facebook/create-react-app/issues/5358
|
|
98
|
+
runtimeChunk: {
|
|
99
|
+
name: (entrypoint) => `runtime-${entrypoint.name}`,
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
plugins: [
|
|
104
|
+
new HtmlWebpackPlugin({
|
|
105
|
+
inject: true,
|
|
106
|
+
templateContent: html(title),
|
|
107
|
+
|
|
108
|
+
minify: {
|
|
109
|
+
removeComments: true,
|
|
110
|
+
collapseWhitespace: true,
|
|
111
|
+
removeRedundantAttributes: true,
|
|
112
|
+
useShortDoctype: true,
|
|
113
|
+
removeEmptyAttributes: true,
|
|
114
|
+
removeStyleLinkTypeAttributes: true,
|
|
115
|
+
keepClosingSlash: true,
|
|
116
|
+
minifyJS: true,
|
|
117
|
+
minifyCSS: true,
|
|
118
|
+
minifyURLs: true,
|
|
119
|
+
},
|
|
120
|
+
}),
|
|
121
|
+
],
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
return browserConfig;
|
|
125
|
+
}
|