@teambit/webpack 0.0.555 → 0.0.556

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/webpack",
-  "version": "0.0.555",
+  "version": "0.0.556",
   "homepage": "https://bit.dev/teambit/webpack/webpack",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.webpack",
     "name": "webpack",
-    "version": "0.0.555"
+    "version": "0.0.556"
   },
   "dependencies": {
     "webpack": "5.51.1",
@@ -38,13 +38,13 @@
     "assert": "2.0.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/webpack.modules.config-mutator": "0.0.112",
-    "@teambit/bit-error": "0.0.372",
-    "@teambit/bundler": "0.0.555",
-    "@teambit/logger": "0.0.471",
-    "@teambit/cli": "0.0.386",
-    "@teambit/pubsub": "0.0.555",
-    "@teambit/workspace": "0.0.555"
+    "@teambit/webpack.modules.config-mutator": "0.0.113",
+    "@teambit/bit-error": "0.0.373",
+    "@teambit/bundler": "0.0.556",
+    "@teambit/logger": "0.0.472",
+    "@teambit/cli": "0.0.387",
+    "@teambit/pubsub": "0.0.556",
+    "@teambit/workspace": "0.0.556"
   },
   "devDependencies": {
     "@types/webpack": "5.28.0",
@@ -56,7 +56,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.172",
+    "@teambit/legacy": "1.0.173",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -107,6 +107,12 @@
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/config/html.ts

@@ -1,22 +0,0 @@
-/** html template for Previews (docs, compositions, etc) */
-export function html(title: string) {
-  return () => `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>${title}</title>
-      <script>
-      // Allow to use react dev-tools inside the examples
-      try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}
-      </script>
-      <!-- minimal css resets -->
-      <style> html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; } </style>
-    </head>
-    <body>
-      <div id="root"></div>
-    </body>
-  </html>  
-  `;
-}

package/config/webpack-fallbacks-aliases.ts

@@ -1,4 +0,0 @@
-export const fallbacksAliases = {
-  process: require.resolve('process/browser'),
-  buffer: require.resolve('buffer/'),
-};

package/config/webpack-fallbacks-provide-plugin-config.ts

@@ -1,4 +0,0 @@
-export const fallbacksProvidePluginConfig = {
-  process: require.resolve('process/browser'),
-  Buffer: [require.resolve('buffer/'), 'Buffer'],
-};

package/config/webpack-fallbacks.ts

@@ -1,60 +0,0 @@
-// based on https://github1s.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts
-// Full list of old polyfills is accessible here:
-// https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42
-
-const assertFallbackPath = require.resolve('assert/');
-const bufferFallbackPath = require.resolve('buffer/');
-const constantsFallbackPath = require.resolve('constants-browserify');
-const cryptoFallbackPath = require.resolve('crypto-browserify');
-const domainFallbackPath = require.resolve('domain-browser');
-const httpFallbackPath = require.resolve('stream-http');
-const httpsFallbackPath = require.resolve('https-browserify');
-const osFallbackPath = require.resolve('os-browserify/browser');
-const pathFallbackPath = require.resolve('path-browserify');
-const punycodeFallbackPath = require.resolve('punycode/');
-const processFallbackPath = require.resolve('process/browser');
-// Handled in separate alias
-const querystringFallbackPath = require.resolve('querystring-es3');
-const streamFallbackPath = require.resolve('stream-browserify');
-const string_decoderFallbackPath = require.resolve('string_decoder/');
-const sysFallbackPath = require.resolve('util/');
-const timersFallbackPath = require.resolve('timers-browserify');
-const ttyFallbackPath = require.resolve('tty-browserify');
-// Handled in separate alias
-const urlFallbackPath = require.resolve('url/');
-const utilFallbackPath = require.resolve('util/');
-const vmFallbackPath = require.resolve('vm-browserify');
-const zlibFallbackPath = require.resolve('browserify-zlib');
-
-export const fallbacks = {
-  assert: assertFallbackPath,
-  buffer: bufferFallbackPath,
-  constants: constantsFallbackPath,
-  crypto: cryptoFallbackPath,
-  domain: domainFallbackPath,
-  http: httpFallbackPath,
-  https: httpsFallbackPath,
-  os: osFallbackPath,
-  path: pathFallbackPath,
-  punycode: punycodeFallbackPath,
-  process: processFallbackPath,
-  querystring: querystringFallbackPath,
-  stream: streamFallbackPath,
-  string_decoder: string_decoderFallbackPath,
-  sys: sysFallbackPath,
-  timers: timersFallbackPath,
-  tty: ttyFallbackPath,
-  url: urlFallbackPath,
-  util: utilFallbackPath,
-  vm: vmFallbackPath,
-  zlib: zlibFallbackPath,
-  fs: false,
-  net: false,
-  tls: false,
-  child_process: false,
-  // file: false,
-  // module: false,
-  // pnpapi: false,
-  // readline: false,
-  // worker_threads: false,
-} as const;

package/config/webpack-preview.config.ts

@@ -1,59 +0,0 @@
-import webpack, { Configuration } from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { fallbacks } from './webpack-fallbacks';
-import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
-import { fallbacksAliases } from './webpack-fallbacks-aliases';
-import { html } from './html';
-
-export function previewConfigFactory(entries: string[], rootPath: string): Configuration {
-  return {
-    mode: 'production',
-    // Stop compilation early in production
-    bail: true,
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: entries.filter(Boolean),
-
-    output: {
-      // The build folder.
-      path: `${rootPath}/public`,
-
-      filename: 'static/js/[name].[contenthash:8].js',
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
-    },
-
-    resolve: {
-      alias: fallbacksAliases,
-
-      fallback: fallbacks,
-    },
-
-    plugins: [
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            templateContent: html('Preview'),
-          },
-          {
-            minify: {
-              removeComments: true,
-              collapseWhitespace: true,
-              removeRedundantAttributes: true,
-              useShortDoctype: true,
-              removeEmptyAttributes: true,
-              removeStyleLinkTypeAttributes: true,
-              keepClosingSlash: true,
-              minifyJS: true,
-              minifyCSS: true,
-              minifyURLs: true,
-            },
-          }
-        )
-      ),
-      new webpack.ProvidePlugin(fallbacksProvidePluginConfig),
-    ],
-  };
-}

package/config/webpack.config.ts

@@ -1,32 +0,0 @@
-import webpack, { Configuration } from 'webpack';
-import { fallbacks } from './webpack-fallbacks';
-import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
-import { fallbacksAliases } from './webpack-fallbacks-aliases';
-
-export function configFactory(entries: string[], rootPath: string): Configuration {
-  return {
-    mode: 'production',
-    // Stop compilation early in production
-    bail: true,
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: entries.filter(Boolean),
-
-    output: {
-      // The build folder.
-      path: `${rootPath}/public`,
-
-      filename: 'static/js/[name].[contenthash:8].js',
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
-    },
-
-    resolve: {
-      alias: fallbacksAliases,
-
-      fallback: fallbacks,
-    },
-
-    plugins: [new webpack.ProvidePlugin(fallbacksProvidePluginConfig)],
-  };
-}

package/config/webpack.dev.config.ts

@@ -1,156 +0,0 @@
-import path from 'path';
-import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
-import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
-import noopServiceWorkerMiddleware from 'react-dev-utils/noopServiceWorkerMiddleware';
-import redirectServedPath from 'react-dev-utils/redirectServedPathMiddleware';
-import getPublicUrlOrPath from 'react-dev-utils/getPublicUrlOrPath';
-import { PubsubMain } from '@teambit/pubsub';
-import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
-import { WebpackConfigWithDevServer } from '../webpack.dev-server';
-import { fallbacks } from './webpack-fallbacks';
-
-import { html } from './html';
-
-import { WebpackBitReporterPlugin } from '../plugins/webpack-bit-reporter-plugin';
-import { fallbacksProvidePluginConfig } from './webpack-fallbacks-provide-plugin-config';
-import { fallbacksAliases } from './webpack-fallbacks-aliases';
-
-const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development', '/', '/public');
-
-export function configFactory(
-  devServerID: string,
-  workspaceDir: string,
-  entryFiles: string[],
-  publicRoot: string,
-  publicPath: string,
-  pubsub: PubsubMain,
-  title?: string
-): WebpackConfigWithDevServer {
-  const resolveWorkspacePath = (relativePath) => path.resolve(workspaceDir, relativePath);
-
-  // Required for babel-preset-react-app
-  process.env.NODE_ENV = 'development';
-
-  const publicDirectory = `${publicRoot}/${publicPath}`;
-
-  return {
-    // Environment mode
-    mode: 'development',
-
-    devtool: 'inline-source-map',
-
-    // Entry point of app
-    entry: entryFiles.map((filePath) => resolveWorkspacePath(filePath)),
-
-    output: {
-      // Development filename output
-      filename: 'static/js/[name].bundle.js',
-
-      pathinfo: true,
-
-      path: resolveWorkspacePath(publicDirectory),
-
-      // publicPath: resolveWorkspacePath(publicDirectory),
-
-      chunkFilename: 'static/js/[name].chunk.js',
-
-      // point sourcemap entries to original disk locations (format as URL on windows)
-      devtoolModuleFilenameTemplate: (info) => pathNormalizeToLinux(path.resolve(info.absoluteResourcePath)),
-
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      // Commented out to use the default (self) as according to tobias with webpack5 self is working with workers as well
-      // globalObject: 'this',
-    },
-
-    infrastructureLogging: {
-      level: 'error',
-    },
-
-    stats: 'errors-only',
-
-    devServer: {
-      allowedHosts: 'all',
-
-      static: [
-        {
-          directory: resolveWorkspacePath(publicDirectory),
-          staticOptions: {},
-          // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory
-          // Can be:
-          // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
-          publicPath: publicDirectory,
-          // Can be:
-          // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
-          serveIndex: true,
-          // Can be:
-          // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
-          watch: true,
-        },
-      ],
-
-      // Enable compression
-      compress: true,
-
-      // Enable hot reloading
-      hot: true,
-
-      historyApiFallback: {
-        disableDotRule: true,
-        index: resolveWorkspacePath(publicDirectory),
-      },
-
-      client: {
-        overlay: false,
-      },
-
-      onBeforeSetupMiddleware({ app, server }) {
-        // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
-        // middlewares before `redirectServedPath` otherwise will not have any effect
-        // This lets us fetch source contents from webpack for the error overlay
-        app.use(evalSourceMapMiddleware(server));
-        // This lets us open files from the runtime error overlay.
-        app.use(errorOverlayMiddleware());
-      },
-
-      onAfterSetupMiddleware({ app }) {
-        // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-        app.use(redirectServedPath(publicUrlOrPath));
-
-        // This service worker file is effectively a 'no-op' that will reset any
-        // previous service worker registered for the same host:port combination.
-        // We do this in development to avoid hitting the production cache if
-        // it used the same host and port.
-        // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-        app.use(noopServiceWorkerMiddleware(publicUrlOrPath));
-      },
-
-      devMiddleware: {
-        // forward static files
-        publicPath: path.join('/', publicRoot),
-      },
-    },
-
-    resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.mdx', '.md'],
-      alias: fallbacksAliases,
-
-      fallback: fallbacks as any,
-    },
-
-    plugins: [
-      new HtmlWebpackPlugin({
-        templateContent: html(title || 'Component preview'),
-        filename: 'index.html',
-      }),
-
-      new webpack.ProvidePlugin(fallbacksProvidePluginConfig),
-
-      new WebpackBitReporterPlugin({
-        options: { pubsub, devServerID },
-      }),
-    ],
-  };
-}

package/events/index.ts

@@ -1,2 +0,0 @@
-export * from './webpack-compilation-done-event';
-export * from './webpack-compilation-started-event';

package/events/webpack-compilation-done-event.ts

@@ -1,20 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import type { Stats } from 'webpack';
-import { BitBaseEvent } from '@teambit/pubsub';
-
-class WebpackCompilationDoneEventData {
-  constructor(readonly stats: Stats, readonly devServerID: string) {}
-}
-
-export class WebpackCompilationDoneEvent extends BitBaseEvent<WebpackCompilationDoneEventData> {
-  static readonly TYPE = 'webpack-compilation-done';
-
-  constructor(readonly timestamp: number, readonly stats: Stats, readonly devServerID: string) {
-    super(
-      WebpackCompilationDoneEvent.TYPE,
-      '0.0.1',
-      timestamp,
-      new WebpackCompilationDoneEventData(stats, devServerID)
-    );
-  }
-}

package/events/webpack-compilation-started-event.ts

@@ -1,14 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import { BitBaseEvent } from '@teambit/pubsub';
-
-type Params = {
-  devServerID: string;
-};
-
-export class WebpackCompilationStartedEvent extends BitBaseEvent<Params> {
-  static readonly TYPE = 'webpack-compilation-started';
-
-  constructor(readonly timestamp, readonly params: Params) {
-    super(WebpackCompilationStartedEvent.TYPE, '0.0.1', timestamp, params);
-  }
-}

package/index.ts

@@ -1,20 +0,0 @@
-export type {
-  WebpackMain,
-  WebpackConfigTransformer,
-  WebpackConfigTransformContext,
-  WebpackConfigDevServerTransformContext,
-  GlobalWebpackConfigTransformContext,
-  WebpackConfigDevServerTransformer,
-} from './webpack.main.runtime';
-export { runTransformersWithContext } from './webpack.main.runtime';
-export { WebpackAspect } from './webpack.aspect';
-export { WebpackDevServer } from './webpack.dev-server';
-export { WebpackBundler } from './webpack.bundler';
-export type { WebpackConfigWithDevServer } from './webpack.dev-server';
-export * from './events';
-export { Configuration } from 'webpack';
-export { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
-export { WebpackBitReporterPlugin } from './plugins/webpack-bit-reporter-plugin';
-export { fallbacks } from './config/webpack-fallbacks';
-export { fallbacksAliases } from './config/webpack-fallbacks-aliases';
-export { fallbacksProvidePluginConfig } from './config/webpack-fallbacks-provide-plugin-config';

package/plugins/webpack-bit-reporter-plugin.ts

@@ -1,33 +0,0 @@
-import type { Compiler, Stats } from 'webpack';
-import { WebpackCompilationDoneEvent, WebpackCompilationStartedEvent } from '../events';
-import { WebpackAspect } from '../webpack.aspect';
-
-const PLUGIN_NAME = 'webpack-compiler-started-plugin';
-
-/**
- * Monitors Webpack's compilation, and updates progress to Bit
- */
-export class WebpackBitReporterPlugin {
-  // TODO: add plugin type from webpack and implement it
-  pubsub: any;
-  devServerID: string;
-
-  constructor({ options }) {
-    this.pubsub = options.pubsub;
-    this.devServerID = options.devServerID;
-  }
-
-  apply(compiler: Compiler) {
-    // "Called before a new compilation is created."
-    compiler.hooks.compile.tap(PLUGIN_NAME, () => {
-      const event = new WebpackCompilationStartedEvent(Date.now(), { devServerID: this.devServerID });
-      this.pubsub.pub(WebpackAspect.id, event);
-    });
-
-    // "Executed when the compilation has completed."
-    compiler.hooks.done.tap(PLUGIN_NAME, (stats: Stats) => {
-      const event = new WebpackCompilationDoneEvent(Date.now(), stats, this.devServerID);
-      this.pubsub.pub(WebpackAspect.id, event);
-    });
-  }
-}

package/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
-    ],
-    "target": "es2015",
-    "module": "commonjs",
-    "jsx": "react",
-    "declaration": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "outDir": "dist",
-    "composite": true,
-    "emitDeclarationOnly": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "rootDir": ".",
-    "preserveConstEnums": true,
-    "resolveJsonModule": true
-  },
-  "exclude": [
-    "dist"
-  ]
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}

package/types/style.d.ts

@@ -1,42 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.mdx' {
-  const component: any;
-  export default component;
-}

package/webpack.aspect.ts

@@ -1,5 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const WebpackAspect = Aspect.create({
-  id: 'teambit.webpack/webpack',
-});

package/webpack.bundler.ts

@@ -1,72 +0,0 @@
-import { BitError } from '@teambit/bit-error';
-import { Bundler, BundlerResult, Target } from '@teambit/bundler';
-import { Logger } from '@teambit/logger';
-import mapSeries from 'p-map-series';
-import { Compiler, Configuration } from 'webpack';
-
-export class WebpackBundler implements Bundler {
-  constructor(
-    /**
-     * targets to bundle.
-     */
-    private targets: Target[],
-
-    /**
-     * webpack configuration.
-     */
-    private configs: Configuration[],
-
-    private logger: Logger,
-
-    private webpack
-  ) {}
-
-  async run(): Promise<BundlerResult[]> {
-    const startTime = Date.now();
-    const compilers = this.configs.map((config: any) => this.webpack(config));
-    const longProcessLogger = this.logger.createLongProcessLogger('running Webpack bundler', compilers.length);
-    const componentOutput = await mapSeries(compilers, (compiler: Compiler) => {
-      const components = this.getComponents(compiler.outputPath);
-      longProcessLogger.logProgress(components.map((component) => component.id.toString()).join(', '));
-      return new Promise((resolve) => {
-        // TODO: split to multiple processes to reduce time and configure concurrent builds.
-        // @see https://github.com/trivago/parallel-webpack
-        return compiler.run((err, stats) => {
-          if (err) {
-            return resolve({
-              errors: [`${err.toString()}\n${err.stack}`],
-              components,
-            });
-          }
-          if (!stats) throw new BitError('unknown build error');
-          const info = stats.toJson();
-          return resolve({
-            errors: info.errors,
-            outputPath: stats.compilation.outputOptions.path,
-            components,
-            warnings: info.warnings,
-            startTime,
-            endTime: Date.now(),
-          });
-        });
-      });
-    });
-    longProcessLogger.end();
-    return componentOutput as BundlerResult[];
-  }
-
-  private getComponents(outputPath: string) {
-    const splitPath = outputPath.split('/');
-    splitPath.pop();
-    const path = splitPath.join('/');
-    const target = this.targets.find((targetCandidate) => {
-      return path === targetCandidate.outputPath;
-    });
-
-    if (!target) {
-      throw new Error(`Could not find component id for path "${path}"`);
-    }
-
-    return target.components;
-  }
-}

package/webpack.composition.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const Logo = () => (
-  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>
-    <img style={{ width: 70 }} src="https://static.bit.dev/brands/logo-webpack.svg" />
-  </div>
-);

package/webpack.dev-server.ts

@@ -1,63 +0,0 @@
-import type { DevServer } from '@teambit/bundler';
-import type { Server } from 'http';
-import type { webpack as webpackCompiler, Configuration } from 'webpack';
-import type * as WDS from 'webpack-dev-server';
-import { inspect } from 'util';
-import { WebpackAspect } from './webpack.aspect';
-
-export interface WebpackConfigWithDevServer extends Configuration {
-  devServer: WDS.Configuration;
-}
-export class WebpackDevServer implements DevServer {
-  constructor(
-    private config: WebpackConfigWithDevServer,
-    private webpack: typeof webpackCompiler,
-    private WsDevServer: WDS
-  ) {}
-
-  private getCompiler(): any {
-    return this.webpack(this.config);
-  }
-
-  id = WebpackAspect.id;
-
-  displayName = 'Webpack dev server';
-
-  displayConfig(): string {
-    return inspect(this.config, { depth: 10 });
-  }
-
-  async listen(port: number): Promise<Server> {
-    if (!this.config.devServer) {
-      throw new Error('Missing devServer configuration for webpack');
-    }
-    // Prevent different port between the config port and the listen arg port
-    this.config.devServer.port = port;
-
-    // Adding signal listeners to make sure we immediately close the process on sigint / sigterm (otherwise webpack dev server closing will take time)
-    this.addSignalListener();
-
-    // Compatibility check for Webpack dev server v3 (e.g. for Angular v8)
-    if (typeof (this.WsDevServer as any).addDevServerEntrypoints !== 'undefined') {
-      // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
-      const webpackDs = new (this.WsDevServer as any)(this.getCompiler(), this.config.devServer);
-      return webpackDs.listen(port);
-    }
-
-    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
-    const webpackDs: WDS = new this.WsDevServer(this.config.devServer, this.getCompiler());
-    await webpackDs.start();
-
-    return webpackDs.server;
-  }
-
-  private addSignalListener() {
-    process.on('SIGTERM', () => {
-      process.exit();
-    });
-
-    process.on('SIGINT', () => {
-      process.exit();
-    });
-  }
-}

package/webpack.main.runtime.ts

@@ -1,175 +0,0 @@
-import webpack, { Configuration } from 'webpack';
-import PubsubAspect, { PubsubMain } from '@teambit/pubsub';
-import {
-  BundlerAspect,
-  BundlerContext,
-  BundlerMain,
-  DevServer,
-  DevServerContext,
-  BundlerMode,
-  Target,
-} from '@teambit/bundler';
-import { MainRuntime } from '@teambit/cli';
-import { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-import { merge } from 'webpack-merge';
-import WsDevServer from 'webpack-dev-server';
-import { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
-
-import { configFactory as devServerConfigFactory } from './config/webpack.dev.config';
-import { previewConfigFactory } from './config/webpack-preview.config';
-import { configFactory as baseConfigFactory } from './config/webpack.config';
-
-import { WebpackAspect } from './webpack.aspect';
-import { WebpackBundler } from './webpack.bundler';
-import { WebpackDevServer } from './webpack.dev-server';
-
-export type WebpackConfigTransformContext = GlobalWebpackConfigTransformContext & {
-  target: Target;
-};
-
-export type WebpackConfigDevServerTransformContext = GlobalWebpackConfigTransformContext;
-
-export type GlobalWebpackConfigTransformContext = {
-  mode: BundlerMode;
-};
-
-export type WebpackConfigTransformer = (
-  config: WebpackConfigMutator,
-  context: WebpackConfigTransformContext
-) => WebpackConfigMutator;
-
-export type WebpackConfigDevServerTransformer = (
-  config: WebpackConfigMutator,
-  context: WebpackConfigDevServerTransformContext
-) => WebpackConfigMutator;
-
-export class WebpackMain {
-  constructor(
-    /**
-     * Pubsub extension.
-     */
-    public pubsub: PubsubMain,
-
-    /**
-     * workspace extension.
-     */
-    private workspace: Workspace,
-
-    /**
-     * bundler extension.
-     */
-    private bundler: BundlerMain,
-
-    /**
-     * Logger extension
-     */
-    public logger: Logger
-  ) {}
-
-  /**
-   * create an instance of bit-compliant webpack dev server for a set of components
-   */
-  createDevServer(context: DevServerContext, transformers: WebpackConfigTransformer[] = []): DevServer {
-    const config = this.createDevServerConfig(
-      context.entry,
-      this.workspace.path,
-      context.id,
-      context.rootPath,
-      context.publicPath,
-      context.title
-    ) as any;
-    const configMutator = new WebpackConfigMutator(config);
-    const transformerContext: GlobalWebpackConfigTransformContext = { mode: 'dev' };
-    const afterMutation = runTransformersWithContext(configMutator.clone(), transformers, transformerContext);
-    // @ts-ignore - fix this
-    return new WebpackDevServer(afterMutation.raw, webpack, WsDevServer);
-  }
-
-  mergeConfig(target: any, source: any): any {
-    return merge(target, source);
-  }
-
-  createBundler(
-    context: BundlerContext,
-    transformers: WebpackConfigTransformer[] = [],
-    initialConfigs?: webpack.Configuration[]
-  ) {
-    const transformerContext: GlobalWebpackConfigTransformContext = { mode: 'prod' };
-    const configs = initialConfigs || this.createEmptyConfigs(context.targets, transformers, transformerContext);
-    return new WebpackBundler(context.targets, configs, this.logger, webpack);
-  }
-
-  createPreviewBundler(context: BundlerContext, transformers: WebpackConfigTransformer[] = []) {
-    const transformerContext: GlobalWebpackConfigTransformContext = { mode: 'prod' };
-    const configs = this.createPreviewConfig(context.targets, transformers, transformerContext);
-    return new WebpackBundler(context.targets, configs, this.logger, webpack);
-  }
-
-  private createConfigs(
-    targets: Target[],
-    factory: (entries: string[], outputPath: string) => Configuration,
-    transformers: WebpackConfigTransformer[] = [],
-    transformerContext: GlobalWebpackConfigTransformContext
-  ) {
-    return targets.map((target) => {
-      const baseConfig = factory(target.entries, target.outputPath);
-      const configMutator = new WebpackConfigMutator(baseConfig);
-      const context = Object.assign({}, transformerContext, { target });
-      const afterMutation = runTransformersWithContext(configMutator.clone(), transformers, context);
-      return afterMutation.raw;
-    });
-  }
-
-  private createEmptyConfigs(
-    targets: Target[],
-    transformers: WebpackConfigTransformer[] = [],
-    transformerContext: GlobalWebpackConfigTransformContext
-  ) {
-    return this.createConfigs(targets, baseConfigFactory, transformers, transformerContext);
-  }
-
-  private createPreviewConfig(
-    targets: Target[],
-    transformers: WebpackConfigTransformer[] = [],
-    transformerContext: GlobalWebpackConfigTransformContext
-  ) {
-    return this.createConfigs(targets, previewConfigFactory, transformers, transformerContext);
-  }
-
-  private createDevServerConfig(
-    entry: string[],
-    rootPath: string,
-    devServerID: string,
-    publicRoot: string,
-    publicPath: string,
-    title?: string
-  ) {
-    return devServerConfigFactory(devServerID, rootPath, entry, publicRoot, publicPath, this.pubsub, title);
-  }
-
-  static slots = [];
-
-  static runtime = MainRuntime;
-  static dependencies = [PubsubAspect, WorkspaceAspect, BundlerAspect, LoggerAspect];
-
-  static async provider([pubsub, workspace, bundler, logger]: [PubsubMain, Workspace, BundlerMain, LoggerMain]) {
-    const logPublisher = logger.createLogger(WebpackAspect.id);
-    return new WebpackMain(pubsub, workspace, bundler, logPublisher);
-  }
-}
-
-WebpackAspect.addRuntime(WebpackMain);
-
-export function runTransformersWithContext(
-  config: WebpackConfigMutator,
-  transformers: Array<WebpackConfigTransformer | WebpackConfigDevServerTransformer> = [],
-  context: WebpackConfigTransformContext | WebpackConfigDevServerTransformContext
-): WebpackConfigMutator {
-  if (!Array.isArray(transformers)) return config;
-  const newConfig = transformers.reduce((acc, transformer) => {
-    // @ts-ignore
-    return transformer(acc, context);
-  }, config);
-  return newConfig;
-}