@teambit/webpack 1.0.108 → 1.0.109
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/artifacts/preview/teambit_webpack_webpack-preview.js +1 -0
- package/dist/{preview-1703647408454.js → preview-1703698405864.js} +2 -2
- package/package.json +8 -8
- package/index.ts +0 -29
- package/webpack.aspect.ts +0 -5
- package/webpack.bundler.ts +0 -162
- package/webpack.dev-server.ts +0 -95
- package/webpack.main.runtime.ts +0 -241
@@ -0,0 +1 @@
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["teambit.webpack/webpack-preview"]=t():e["teambit.webpack/webpack-preview"]=t()}(self,(()=>(()=>{"use strict";var e={10546:(e,t,o)=>{var r={id:"teambit.webpack/webpack@1.0.109",homepage:"https://bit.cloud/teambit/webpack/webpack",exported:!0};function n(){const e=i(o(87363));return n=function(){return e},e}function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,n.__bit_component=r,i.__bit_component=r;const p=()=>n().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},n().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/brands/logo-webpack.svg"}));p.__bit_component=r,t.Logo=p},87363:e=>{e.exports=React}},t={};function o(r){var n=t[r];if(void 0!==n)return n.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{o.r(r),o.d(r,{compositions:()=>u,compositions_metadata:()=>b,overview:()=>l});var e={};o.r(e),o.d(e,{default:()=>d});var t=o(10546);o(87363);const n=MdxJsReact,i=TeambitMdxUiMdxScopeContext;var p=["components"];function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},a.apply(this,arguments)}var c={},s="wrapper";function d(e){var t=e.components,o=function(e,t){if(null==e)return{};var o,r,n=function(e,t){if(null==e)return{};var o,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)o=i[r],t.indexOf(o)>=0||(n[o]=e[o]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)o=i[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}(e,p);return(0,n.mdx)(s,a({},c,o,{components:t,mdxType:"MDXLayout"}),(0,n.mdx)(i.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"}))}d.isMDXComponent=!0;const u=[t],l=[e],b={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),r})()));
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.webpack_webpack@1.0.
|
2
|
-
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.webpack_webpack@1.0.
|
1
|
+
import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.webpack_webpack@1.0.109/dist/webpack.composition.js';
|
2
|
+
import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.webpack_webpack@1.0.109/dist/webpack.docs.mdx';
|
3
3
|
|
4
4
|
export const compositions = [compositions_0];
|
5
5
|
export const overview = [overview_0];
|
package/package.json
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "@teambit/webpack",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.109",
|
4
4
|
"homepage": "https://bit.cloud/teambit/webpack/webpack",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"componentId": {
|
7
7
|
"scope": "teambit.webpack",
|
8
8
|
"name": "webpack",
|
9
|
-
"version": "1.0.
|
9
|
+
"version": "1.0.109"
|
10
10
|
},
|
11
11
|
"dependencies": {
|
12
12
|
"webpack": "5.84.1",
|
@@ -46,11 +46,11 @@
|
|
46
46
|
"@teambit/harmony": "0.4.6",
|
47
47
|
"@teambit/bit-error": "0.0.404",
|
48
48
|
"@teambit/webpack.modules.config-mutator": "0.0.164",
|
49
|
-
"@teambit/bundler": "1.0.
|
50
|
-
"@teambit/logger": "0.0.
|
51
|
-
"@teambit/cli": "0.0.
|
52
|
-
"@teambit/pubsub": "1.0.
|
53
|
-
"@teambit/workspace": "1.0.
|
49
|
+
"@teambit/bundler": "1.0.109",
|
50
|
+
"@teambit/logger": "0.0.934",
|
51
|
+
"@teambit/cli": "0.0.841",
|
52
|
+
"@teambit/pubsub": "1.0.109",
|
53
|
+
"@teambit/workspace": "1.0.109",
|
54
54
|
"@teambit/webpack.modules.generate-expose-loaders": "0.0.14",
|
55
55
|
"@teambit/webpack.modules.generate-externals": "0.0.15",
|
56
56
|
"@teambit/webpack.plugins.inject-head-webpack-plugin": "0.0.8"
|
@@ -62,7 +62,7 @@
|
|
62
62
|
"@types/react-dev-utils": "9.0.10",
|
63
63
|
"@types/jest": "^29.2.2",
|
64
64
|
"@types/testing-library__jest-dom": "^5.9.5",
|
65
|
-
"@teambit/harmony.envs.core-aspect-env": "0.0.
|
65
|
+
"@teambit/harmony.envs.core-aspect-env": "0.0.14"
|
66
66
|
},
|
67
67
|
"peerDependencies": {
|
68
68
|
"@teambit/legacy": "1.0.625",
|
package/index.ts
DELETED
@@ -1,29 +0,0 @@
|
|
1
|
-
export type {
|
2
|
-
WebpackMain,
|
3
|
-
WebpackConfigTransformer,
|
4
|
-
WebpackConfigTransformContext,
|
5
|
-
WebpackConfigDevServerTransformContext,
|
6
|
-
GlobalWebpackConfigTransformContext,
|
7
|
-
WebpackConfigDevServerTransformer,
|
8
|
-
} from './webpack.main.runtime';
|
9
|
-
export { runTransformersWithContext } from './webpack.main.runtime';
|
10
|
-
export { WebpackAspect } from './webpack.aspect';
|
11
|
-
export { WebpackDevServer } from './webpack.dev-server';
|
12
|
-
export { WebpackBundler } from './webpack.bundler';
|
13
|
-
export type { WebpackConfigWithDevServer } from './webpack.dev-server';
|
14
|
-
export * from './events';
|
15
|
-
export type { Configuration } from 'webpack';
|
16
|
-
export { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
|
17
|
-
export { WebpackBitReporterPlugin } from './plugins/webpack-bit-reporter-plugin';
|
18
|
-
export { fallbacks } from './config/webpack-fallbacks';
|
19
|
-
export { fallbacksAliases } from './config/webpack-fallbacks-aliases';
|
20
|
-
export { fallbacksProvidePluginConfig } from './config/webpack-fallbacks-provide-plugin-config';
|
21
|
-
export {
|
22
|
-
GenerateBodyInjectionTransformer,
|
23
|
-
BodyInjectionOptions,
|
24
|
-
generateAddAliasesFromPeersTransformer,
|
25
|
-
generateExposePeersTransformer,
|
26
|
-
generateExternalsTransformer,
|
27
|
-
GenerateHeadInjectionTransformer,
|
28
|
-
HeadInjectionOptions,
|
29
|
-
} from './transformers';
|
package/webpack.aspect.ts
DELETED
package/webpack.bundler.ts
DELETED
@@ -1,162 +0,0 @@
|
|
1
|
-
import { BitError } from '@teambit/bit-error';
|
2
|
-
import type { Bundler, BundlerResult, Asset, Target, EntriesAssetsMap, BundlerContextMetaData } from '@teambit/bundler';
|
3
|
-
import type { Logger } from '@teambit/logger';
|
4
|
-
import { compact, isEmpty } from 'lodash';
|
5
|
-
import mapSeries from 'p-map-series';
|
6
|
-
import type { Compiler, Configuration, StatsCompilation, StatsAsset } from 'webpack';
|
7
|
-
import { sep } from 'path';
|
8
|
-
|
9
|
-
type AssetsMap = { [assetId: string]: Asset };
|
10
|
-
export class WebpackBundler implements Bundler {
|
11
|
-
constructor(
|
12
|
-
/**
|
13
|
-
* targets to bundle.
|
14
|
-
*/
|
15
|
-
private targets: Target[],
|
16
|
-
|
17
|
-
/**
|
18
|
-
* webpack configuration.
|
19
|
-
*/
|
20
|
-
private configs: Configuration[],
|
21
|
-
|
22
|
-
private logger: Logger,
|
23
|
-
|
24
|
-
private webpack,
|
25
|
-
|
26
|
-
private metaData?: BundlerContextMetaData | undefined
|
27
|
-
) {}
|
28
|
-
|
29
|
-
async run(): Promise<BundlerResult[]> {
|
30
|
-
const startTime = Date.now();
|
31
|
-
const compilers = this.configs.map((config: any) => this.webpack(config));
|
32
|
-
const initiator = this.metaData?.initiator;
|
33
|
-
const envId = this.metaData?.envId;
|
34
|
-
const initiatorMessage = initiator ? `process initiated by: ${initiator}.` : '';
|
35
|
-
const envIdMessage = envId ? `config created by env: ${envId}.` : '';
|
36
|
-
|
37
|
-
const longProcessLogger = this.logger.createLongProcessLogger('running Webpack bundler', compilers.length);
|
38
|
-
const componentOutput = await mapSeries(compilers, (compiler: Compiler) => {
|
39
|
-
const components = this.getComponents(compiler.outputPath);
|
40
|
-
const componentsLengthMessage = `running on ${components.length} components`;
|
41
|
-
const fullMessage = `${initiatorMessage} ${envIdMessage} ${componentsLengthMessage}`;
|
42
|
-
const ids = components.map((component) => component.id.toString()).join(', ');
|
43
|
-
longProcessLogger.logProgress(`${fullMessage}`);
|
44
|
-
this.logger.debug(`${fullMessage}\ncomponents ids: ${ids}`);
|
45
|
-
return new Promise((resolve) => {
|
46
|
-
// TODO: split to multiple processes to reduce time and configure concurrent builds.
|
47
|
-
// @see https://github.com/trivago/parallel-webpack
|
48
|
-
return compiler.run((err, stats) => {
|
49
|
-
if (err) {
|
50
|
-
this.logger.error('get error from webpack compiler, full error:', err);
|
51
|
-
|
52
|
-
return resolve({
|
53
|
-
errors: [`${err.toString()}\n${err.stack}`],
|
54
|
-
components,
|
55
|
-
});
|
56
|
-
}
|
57
|
-
if (!stats) throw new BitError('unknown build error');
|
58
|
-
// const info = stats.toJson();
|
59
|
-
|
60
|
-
const info = stats.toJson({
|
61
|
-
all: false,
|
62
|
-
entrypoints: true,
|
63
|
-
warnings: true,
|
64
|
-
errors: true,
|
65
|
-
assets: true,
|
66
|
-
chunkGroupAuxiliary: true,
|
67
|
-
relatedAssets: true,
|
68
|
-
cachedAssets: true,
|
69
|
-
});
|
70
|
-
const assetsMap = this.getAssets(info);
|
71
|
-
const entriesAssetsMap = this.getEntriesAssetsMap(info, assetsMap);
|
72
|
-
|
73
|
-
return resolve({
|
74
|
-
assets: Object.values(assetsMap),
|
75
|
-
assetsByChunkName: info.assetsByChunkName,
|
76
|
-
entriesAssetsMap,
|
77
|
-
errors: this.getErrors(info),
|
78
|
-
outputPath: stats.compilation.outputOptions.path,
|
79
|
-
components,
|
80
|
-
warnings: info.warnings,
|
81
|
-
startTime,
|
82
|
-
endTime: Date.now(),
|
83
|
-
});
|
84
|
-
});
|
85
|
-
});
|
86
|
-
});
|
87
|
-
longProcessLogger.end();
|
88
|
-
return componentOutput as BundlerResult[];
|
89
|
-
}
|
90
|
-
|
91
|
-
private getErrors(stats: StatsCompilation): Error[] {
|
92
|
-
if (!stats.errors) return [];
|
93
|
-
const fieldsToShow = ['message', 'moduleId', 'moduleName', 'moduleIdentifier', 'loc'];
|
94
|
-
return stats.errors.map((webpackError) => {
|
95
|
-
const lines = fieldsToShow.map((fieldName) => {
|
96
|
-
if (webpackError[fieldName]) {
|
97
|
-
return `${fieldName}: ${webpackError[fieldName]}`;
|
98
|
-
}
|
99
|
-
return undefined;
|
100
|
-
});
|
101
|
-
const errorMessage = compact(lines).join('\n');
|
102
|
-
return new BitError(errorMessage);
|
103
|
-
});
|
104
|
-
}
|
105
|
-
|
106
|
-
private getAssets(stats: StatsCompilation): AssetsMap {
|
107
|
-
if (!stats.assets) return {};
|
108
|
-
return stats.assets.reduce((acc, asset) => {
|
109
|
-
acc[asset.name] = {
|
110
|
-
name: asset.name,
|
111
|
-
size: asset.size,
|
112
|
-
compressedSize: this.getCompressedSize(asset),
|
113
|
-
};
|
114
|
-
return acc;
|
115
|
-
}, {});
|
116
|
-
}
|
117
|
-
|
118
|
-
private getEntriesAssetsMap(stats: StatsCompilation, assetsMap: AssetsMap): EntriesAssetsMap {
|
119
|
-
const entriesMap = stats.entrypoints;
|
120
|
-
if (!entriesMap || !Object.keys(assetsMap).length) return {};
|
121
|
-
Object.entries(entriesMap).forEach(([, entryVal]) => {
|
122
|
-
let compressedAssetsSize = 0;
|
123
|
-
let compressedAuxiliaryAssetsSize = 0;
|
124
|
-
entryVal.assets?.forEach((asset) => {
|
125
|
-
const compressedSize = assetsMap[asset.name]?.compressedSize;
|
126
|
-
if (compressedSize) {
|
127
|
-
// @ts-ignore
|
128
|
-
asset.compressedSize = compressedSize;
|
129
|
-
compressedAssetsSize += compressedSize;
|
130
|
-
}
|
131
|
-
});
|
132
|
-
entryVal.auxiliaryAssets?.forEach((asset) => {
|
133
|
-
const compressedSize = assetsMap[asset.name]?.compressedSize;
|
134
|
-
if (compressedSize) {
|
135
|
-
// @ts-ignore
|
136
|
-
asset.compressedSize = compressedSize;
|
137
|
-
compressedAuxiliaryAssetsSize += compressedSize;
|
138
|
-
}
|
139
|
-
});
|
140
|
-
entryVal.compressedAssetsSize = compressedAssetsSize;
|
141
|
-
entryVal.compressedAuxiliaryAssetsSize = compressedAuxiliaryAssetsSize;
|
142
|
-
});
|
143
|
-
return entriesMap as any as EntriesAssetsMap;
|
144
|
-
}
|
145
|
-
|
146
|
-
private getCompressedSize(asset: StatsAsset): number | undefined {
|
147
|
-
if (!asset.related || isEmpty(asset.related)) return undefined;
|
148
|
-
const gzipped = asset.related.find((relatedAsset) => {
|
149
|
-
return relatedAsset.type === 'gzipped';
|
150
|
-
});
|
151
|
-
if (!gzipped) return undefined;
|
152
|
-
return gzipped.size;
|
153
|
-
}
|
154
|
-
|
155
|
-
private getComponents(outputPath: string) {
|
156
|
-
const path = outputPath.substring(0, outputPath.lastIndexOf(sep));
|
157
|
-
const target = this.targets.find((targetCandidate) => path === targetCandidate.outputPath);
|
158
|
-
|
159
|
-
if (!target) throw new Error(`Could not find component id for path "${path}"`);
|
160
|
-
return target.components;
|
161
|
-
}
|
162
|
-
}
|
package/webpack.dev-server.ts
DELETED
@@ -1,95 +0,0 @@
|
|
1
|
-
import { join } from 'path';
|
2
|
-
import type { DevServer } from '@teambit/bundler';
|
3
|
-
import findRoot from 'find-root';
|
4
|
-
import type { Server } from 'http';
|
5
|
-
import type { webpack as webpackCompiler, Configuration } from 'webpack';
|
6
|
-
import type * as WDS from 'webpack-dev-server';
|
7
|
-
import { inspect } from 'util';
|
8
|
-
import { WebpackAspect } from './webpack.aspect';
|
9
|
-
|
10
|
-
export interface WebpackConfigWithDevServer extends Configuration {
|
11
|
-
devServer: WDS.Configuration;
|
12
|
-
favicon?: string;
|
13
|
-
}
|
14
|
-
export class WebpackDevServer implements DevServer {
|
15
|
-
private readonly WsDevServer: typeof WDS;
|
16
|
-
constructor(
|
17
|
-
private config: WebpackConfigWithDevServer,
|
18
|
-
private webpack: typeof webpackCompiler,
|
19
|
-
/**
|
20
|
-
* path to the webpack-dev-server module or instance of webpack-dev-server.
|
21
|
-
* this accept getting an instance for backward compatibility.
|
22
|
-
*/
|
23
|
-
private webpackDevServer: string | typeof WDS
|
24
|
-
) {
|
25
|
-
if (typeof this.webpackDevServer === 'string') {
|
26
|
-
// eslint-disable-next-line import/no-dynamic-require, global-require
|
27
|
-
this.WsDevServer = require(this.webpackDevServer);
|
28
|
-
} else {
|
29
|
-
this.WsDevServer = this.webpackDevServer;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
private getCompiler(): any {
|
34
|
-
return this.webpack(this.config);
|
35
|
-
}
|
36
|
-
|
37
|
-
id = WebpackAspect.id;
|
38
|
-
|
39
|
-
displayName = 'Webpack dev server';
|
40
|
-
|
41
|
-
version(): string {
|
42
|
-
if (typeof this.webpackDevServer !== 'string') {
|
43
|
-
return 'unknown';
|
44
|
-
}
|
45
|
-
// Resolve version from the webpack-dev-server package.json
|
46
|
-
try {
|
47
|
-
const root = findRoot(this.webpackDevServer);
|
48
|
-
const packageJsonPath = join(root, 'package.json');
|
49
|
-
// eslint-disable-next-line import/no-dynamic-require, global-require
|
50
|
-
const packageJson = require(packageJsonPath);
|
51
|
-
return packageJson.version;
|
52
|
-
} catch (err) {
|
53
|
-
return 'unknown';
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
displayConfig(): string {
|
58
|
-
return inspect(this.config, { depth: 10 });
|
59
|
-
}
|
60
|
-
|
61
|
-
async listen(port: number): Promise<Server> {
|
62
|
-
if (!this.config.devServer) {
|
63
|
-
throw new Error('Missing devServer configuration for webpack');
|
64
|
-
}
|
65
|
-
// Prevent different port between the config port and the listen arg port
|
66
|
-
this.config.devServer.port = port;
|
67
|
-
|
68
|
-
// Adding signal listeners to make sure we immediately close the process on sigint / sigterm (otherwise webpack dev server closing will take time)
|
69
|
-
this.addSignalListener();
|
70
|
-
|
71
|
-
// Compatibility check for Webpack dev server v3 (e.g. for Angular v8)
|
72
|
-
if (typeof (this.WsDevServer as any).addDevServerEntrypoints !== 'undefined') {
|
73
|
-
// @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
|
74
|
-
const webpackDs = new (this.WsDevServer as any)(this.getCompiler(), this.config.devServer);
|
75
|
-
return webpackDs.listen(port);
|
76
|
-
}
|
77
|
-
|
78
|
-
// @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
|
79
|
-
const webpackDs: WDS = new this.WsDevServer(this.config.devServer, this.getCompiler());
|
80
|
-
await webpackDs.start();
|
81
|
-
|
82
|
-
// @ts-ignore
|
83
|
-
return webpackDs.server;
|
84
|
-
}
|
85
|
-
|
86
|
-
private addSignalListener() {
|
87
|
-
process.on('SIGTERM', () => {
|
88
|
-
process.exit();
|
89
|
-
});
|
90
|
-
|
91
|
-
process.on('SIGINT', () => {
|
92
|
-
process.exit();
|
93
|
-
});
|
94
|
-
}
|
95
|
-
}
|
package/webpack.main.runtime.ts
DELETED
@@ -1,241 +0,0 @@
|
|
1
|
-
import webpack, { Configuration } from 'webpack';
|
2
|
-
import PubsubAspect, { PubsubMain } from '@teambit/pubsub';
|
3
|
-
import {
|
4
|
-
BundlerAspect,
|
5
|
-
BundlerContext,
|
6
|
-
BundlerMain,
|
7
|
-
DevServer,
|
8
|
-
DevServerContext,
|
9
|
-
BundlerMode,
|
10
|
-
Target,
|
11
|
-
} from '@teambit/bundler';
|
12
|
-
import { MainRuntime } from '@teambit/cli';
|
13
|
-
import { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
|
14
|
-
import { Workspace, WorkspaceAspect } from '@teambit/workspace';
|
15
|
-
import { merge } from 'webpack-merge';
|
16
|
-
// We want to import it to make sure bit recognizes it as a dependency
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
18
|
-
import WsDevServer from 'webpack-dev-server';
|
19
|
-
import { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
|
20
|
-
|
21
|
-
import { generateAddAliasesFromPeersTransformer, generateExternalsTransformer } from './transformers';
|
22
|
-
import { configFactory as devServerConfigFactory } from './config/webpack.dev.config';
|
23
|
-
import { configFactory as baseConfigFactory } from './config/webpack.config';
|
24
|
-
|
25
|
-
import { WebpackAspect } from './webpack.aspect';
|
26
|
-
import { WebpackBundler } from './webpack.bundler';
|
27
|
-
import { WebpackDevServer } from './webpack.dev-server';
|
28
|
-
|
29
|
-
export type WebpackConfigTransformContext = GlobalWebpackConfigTransformContext & {
|
30
|
-
target: Target;
|
31
|
-
};
|
32
|
-
|
33
|
-
export type WebpackConfigDevServerTransformContext = GlobalWebpackConfigTransformContext & DevServerContext;
|
34
|
-
|
35
|
-
export type GlobalWebpackConfigTransformContext = {
|
36
|
-
mode: BundlerMode;
|
37
|
-
/**
|
38
|
-
* Whether the config is for an env template bundling
|
39
|
-
*/
|
40
|
-
isEnvTemplate?: boolean;
|
41
|
-
/**
|
42
|
-
* A path for the host root dir
|
43
|
-
* Host root dir is usually the env root dir
|
44
|
-
* This can be used in different bundle options which run require.resolve
|
45
|
-
* for example when configuring webpack aliases or webpack expose loader on the peers deps
|
46
|
-
*/
|
47
|
-
hostRootDir?: string;
|
48
|
-
};
|
49
|
-
|
50
|
-
export type WebpackConfigTransformer = (
|
51
|
-
config: WebpackConfigMutator,
|
52
|
-
context: WebpackConfigTransformContext
|
53
|
-
) => WebpackConfigMutator;
|
54
|
-
|
55
|
-
export type WebpackConfigDevServerTransformer = (
|
56
|
-
config: WebpackConfigMutator,
|
57
|
-
context: WebpackConfigDevServerTransformContext
|
58
|
-
) => WebpackConfigMutator;
|
59
|
-
|
60
|
-
export class WebpackMain {
|
61
|
-
constructor(
|
62
|
-
/**
|
63
|
-
* Pubsub extension.
|
64
|
-
*/
|
65
|
-
public pubsub: PubsubMain,
|
66
|
-
|
67
|
-
/**
|
68
|
-
* workspace extension.
|
69
|
-
*/
|
70
|
-
private workspace: Workspace,
|
71
|
-
|
72
|
-
/**
|
73
|
-
* bundler extension.
|
74
|
-
*/
|
75
|
-
private bundler: BundlerMain,
|
76
|
-
|
77
|
-
/**
|
78
|
-
* Logger extension
|
79
|
-
*/
|
80
|
-
public logger: Logger
|
81
|
-
) {}
|
82
|
-
|
83
|
-
/**
|
84
|
-
* create an instance of bit-compliant webpack dev server for a set of components
|
85
|
-
*/
|
86
|
-
createDevServer(
|
87
|
-
context: DevServerContext,
|
88
|
-
transformers: WebpackConfigTransformer[] = [],
|
89
|
-
webpackModulePath?: string,
|
90
|
-
webpackDevServerModulePath?: string
|
91
|
-
): DevServer {
|
92
|
-
const config = this.createDevServerConfig(
|
93
|
-
context.entry,
|
94
|
-
this.workspace.path,
|
95
|
-
context.id,
|
96
|
-
context.rootPath,
|
97
|
-
context.publicPath,
|
98
|
-
this.workspace.getComponentPathsRegExps(),
|
99
|
-
context.title
|
100
|
-
) as any;
|
101
|
-
const wdsPath = webpackDevServerModulePath || require.resolve('webpack-dev-server');
|
102
|
-
const configMutator = new WebpackConfigMutator(config);
|
103
|
-
const transformerContext: WebpackConfigDevServerTransformContext = Object.assign(context, { mode: 'dev' as const });
|
104
|
-
const internalTransformers = this.generateTransformers(undefined, transformerContext);
|
105
|
-
|
106
|
-
const afterMutation = runTransformersWithContext(
|
107
|
-
configMutator.clone(),
|
108
|
-
[...internalTransformers, ...transformers],
|
109
|
-
transformerContext
|
110
|
-
);
|
111
|
-
// @ts-ignore - fix this
|
112
|
-
return new WebpackDevServer(afterMutation.raw, this.getWebpackInstance(webpackModulePath, webpack), wdsPath);
|
113
|
-
}
|
114
|
-
|
115
|
-
mergeConfig(target: any, source: any): any {
|
116
|
-
return merge(target, source);
|
117
|
-
}
|
118
|
-
|
119
|
-
createBundler(
|
120
|
-
context: BundlerContext,
|
121
|
-
transformers: WebpackConfigTransformer[] = [],
|
122
|
-
initialConfigs?: webpack.Configuration[],
|
123
|
-
webpackModuleOrPath?: string | any
|
124
|
-
) {
|
125
|
-
const transformerContext: GlobalWebpackConfigTransformContext = {
|
126
|
-
mode: 'prod',
|
127
|
-
isEnvTemplate: context.metaData?.isEnvTemplate,
|
128
|
-
};
|
129
|
-
// eslint-disable-next-line max-len
|
130
|
-
const configs =
|
131
|
-
initialConfigs ||
|
132
|
-
this.createConfigs(context.targets, baseConfigFactory, transformers, transformerContext, context);
|
133
|
-
return new WebpackBundler(
|
134
|
-
context.targets,
|
135
|
-
configs,
|
136
|
-
this.logger,
|
137
|
-
this.getWebpackInstance(webpackModuleOrPath, webpack),
|
138
|
-
context.metaData
|
139
|
-
);
|
140
|
-
}
|
141
|
-
|
142
|
-
private createConfigs(
|
143
|
-
targets: Target[],
|
144
|
-
factory: (target: Target, context: BundlerContext) => Configuration,
|
145
|
-
transformers: WebpackConfigTransformer[] = [],
|
146
|
-
transformerContext: GlobalWebpackConfigTransformContext,
|
147
|
-
bundlerContext: BundlerContext
|
148
|
-
) {
|
149
|
-
return targets.map((target) => {
|
150
|
-
const baseConfig = factory(target, bundlerContext);
|
151
|
-
const configMutator = new WebpackConfigMutator(baseConfig);
|
152
|
-
const context = Object.assign({}, transformerContext, { target });
|
153
|
-
const internalTransformers = this.generateTransformers(context, undefined, target);
|
154
|
-
const afterMutation = runTransformersWithContext(
|
155
|
-
configMutator.clone(),
|
156
|
-
[...internalTransformers, ...transformers],
|
157
|
-
context
|
158
|
-
);
|
159
|
-
return afterMutation.raw;
|
160
|
-
});
|
161
|
-
}
|
162
|
-
|
163
|
-
private generateTransformers(
|
164
|
-
_bundlerContext?: WebpackConfigTransformContext,
|
165
|
-
devServerContext?: WebpackConfigDevServerTransformContext,
|
166
|
-
target?: Target
|
167
|
-
): Array<WebpackConfigTransformer> {
|
168
|
-
const transformers: WebpackConfigTransformer[] = [];
|
169
|
-
// TODO: handle dev server
|
170
|
-
const hostDeps = target?.hostDependencies || devServerContext?.hostDependencies;
|
171
|
-
if (hostDeps) {
|
172
|
-
if (target?.aliasHostDependencies || devServerContext?.aliasHostDependencies) {
|
173
|
-
const peerAliasesTransformer = generateAddAliasesFromPeersTransformer(hostDeps, this.logger);
|
174
|
-
transformers.push(peerAliasesTransformer);
|
175
|
-
}
|
176
|
-
if (target?.externalizeHostDependencies || devServerContext?.externalizeHostDependencies) {
|
177
|
-
const externalsTransformer = generateExternalsTransformer(hostDeps);
|
178
|
-
transformers.push(externalsTransformer);
|
179
|
-
}
|
180
|
-
}
|
181
|
-
return transformers;
|
182
|
-
}
|
183
|
-
|
184
|
-
private getWebpackInstance(webpackOrPath?: any | string, fallback?: any) {
|
185
|
-
if (!webpackOrPath) {
|
186
|
-
return fallback;
|
187
|
-
}
|
188
|
-
if (typeof webpackOrPath === 'string') {
|
189
|
-
// eslint-disable-next-line import/no-dynamic-require, global-require
|
190
|
-
return require(webpackOrPath);
|
191
|
-
}
|
192
|
-
return webpackOrPath;
|
193
|
-
}
|
194
|
-
|
195
|
-
private createDevServerConfig(
|
196
|
-
entry: string[],
|
197
|
-
rootPath: string,
|
198
|
-
devServerID: string,
|
199
|
-
publicRoot: string,
|
200
|
-
publicPath: string,
|
201
|
-
componentPathsRegExps: RegExp[],
|
202
|
-
title?: string
|
203
|
-
) {
|
204
|
-
return devServerConfigFactory(
|
205
|
-
devServerID,
|
206
|
-
rootPath,
|
207
|
-
entry,
|
208
|
-
publicRoot,
|
209
|
-
publicPath,
|
210
|
-
componentPathsRegExps,
|
211
|
-
this.pubsub,
|
212
|
-
title
|
213
|
-
);
|
214
|
-
}
|
215
|
-
|
216
|
-
static slots = [];
|
217
|
-
|
218
|
-
static runtime = MainRuntime;
|
219
|
-
static dependencies = [PubsubAspect, WorkspaceAspect, BundlerAspect, LoggerAspect];
|
220
|
-
|
221
|
-
static async provider([pubsub, workspace, bundler, logger]: [PubsubMain, Workspace, BundlerMain, LoggerMain]) {
|
222
|
-
const logPublisher = logger.createLogger(WebpackAspect.id);
|
223
|
-
return new WebpackMain(pubsub, workspace, bundler, logPublisher);
|
224
|
-
}
|
225
|
-
}
|
226
|
-
|
227
|
-
WebpackAspect.addRuntime(WebpackMain);
|
228
|
-
|
229
|
-
export function runTransformersWithContext(
|
230
|
-
config: WebpackConfigMutator,
|
231
|
-
transformers: Array<WebpackConfigTransformer | WebpackConfigDevServerTransformer> = [],
|
232
|
-
// context: WebpackConfigTransformContext | WebpackConfigDevServerTransformContext
|
233
|
-
context: any
|
234
|
-
): WebpackConfigMutator {
|
235
|
-
if (!Array.isArray(transformers)) return config;
|
236
|
-
const newConfig = transformers.reduce((acc, transformer) => {
|
237
|
-
// @ts-ignore
|
238
|
-
return transformer(acc, context);
|
239
|
-
}, config);
|
240
|
-
return newConfig;
|
241
|
-
}
|