@doracli/webpack 0.0.2 → 0.0.4

package/lib/esm/index.js

@@ -1,31 +1,17 @@
-import webpack, { webpack as webpack$1 } from 'webpack';
+import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
-import { isObject, isArray, noop } from '@cclr/lang';
+import { isObject, isArray, noop, get, obj } from '@cclr/lang';
 import openBrowser from '@dorabag/open-browser';
-import { CompilerBase, cLog, insertTsconfig } from '@doracli/helper';
+import { CompilerBase, cLog, insertTsconfig, deepMergeObject, getTsPathAlias, HtmlManage, getDefaultHtml, DynamicHtml } from '@doracli/helper';
 import { resolveCwd, lookupFile, getDirname, getPackageRoot, getNodeModulesDir, requireResolve, getCwd } from '@dorabag/file-pro';
 import { reactBabelPreset } from '@doracli/preset-babel';
-import path, { join, isAbsolute } from 'path';
+import path, { join, isAbsolute, relative, resolve } from 'path';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WebpackBundleAnalyzer from 'webpack-bundle-analyzer';
 import WebpackBarPlugin from 'webpackbar';
-
-var build = function build(options) {
-  return new Promise(function (resolve, reject) {
-    try {
-      webpack(options, function (err, stats) {
-        resolve({
-          err: err,
-          stats: stats
-        });
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
+import { uri, deepCompareJson } from '@cclr/utils';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -337,14 +323,14 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var _excluded$3 = ["output"],
+var _excluded$2 = ["output"],
   _excluded2 = ["output"],
   _excluded3 = ["static", "headers"];
 var mergeWebpackConfig = function mergeWebpackConfig(first, second) {
   if (!first) return second;
   if (!second) return first;
   var firstOutput = first.output,
-    restFirst = _objectWithoutProperties(first, _excluded$3);
+    restFirst = _objectWithoutProperties(first, _excluded$2);
   var secondOutput = second.output,
     restSecond = _objectWithoutProperties(second, _excluded2);
   var output = firstOutput || secondOutput;
@@ -400,15 +386,16 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
-              compiler = webpack$1(mergeWebpackConfig(_this.initOptions, webpackConfig));
+              compiler = webpack(mergeWebpackConfig(_this.initOptions, webpackConfig));
               return _context2.a(2, {
+                compiler: compiler,
                 rebuild: function rebuild() {
                   return new Promise(function (resolve, reject) {
                     compiler.run(function (err, stats) {
                       if (err) return reject(err);
                       resolve({
-                        Error: err,
-                        Stats: stats
+                        err: err,
+                        stats: stats
                       });
                     });
                   });
@@ -427,7 +414,10 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
                     return _cancel.apply(this, arguments);
                   }
                   return cancel;
-                }()
+                }(),
+                server: function server(serverOptions, webpackConfig) {
+                  return _this.server(serverOptions, webpackConfig, compiler);
+                }
               });
           }
         }, _callee2);
@@ -491,11 +481,11 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
           while (1) switch (_context5.n) {
             case 0:
               return _context5.a(2, new Promise(function (resolve, reject) {
-                webpack$1(mergeWebpackConfig(_this.initOptions, webpackConfig), function (err, stats) {
+                webpack(mergeWebpackConfig(_this.initOptions, webpackConfig), function (err, stats) {
                   if (err) return reject(err);
                   resolve({
-                    Error: err,
-                    Stats: stats
+                    err: err,
+                    stats: stats
                   });
                 });
               }));
@@ -508,16 +498,16 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
     }());
     _defineProperty(_this, "watch", function (watchOptions, webpackConfig) {
       var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noop;
-      var compiler = webpack$1(mergeWebpackConfig(_this.initOptions, webpackConfig));
+      var compiler = webpack(mergeWebpackConfig(_this.initOptions, webpackConfig));
       return compiler.watch(watchOptions || {}, cb);
     });
     _defineProperty(_this, "server", /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(serverOptions, webpackConfig) {
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(serverOptions, webpackConfig, userCompiler) {
         var compiler, tempSrvConfig, open, port, host, devServer;
         return _regenerator().w(function (_context6) {
           while (1) switch (_context6.n) {
             case 0:
-              compiler = webpack$1(mergeWebpackConfig(_this.initOptions, webpackConfig));
+              compiler = userCompiler || webpack(mergeWebpackConfig(_this.initOptions, webpackConfig));
               tempSrvConfig = mergeServerConfig(serverOptions, _this.initOptions.devServer);
               open = tempSrvConfig.open, port = tempSrvConfig.port, host = tempSrvConfig.host;
               devServer = new WebpackDevServer(mergeServerConfig(_objectSpread2(_objectSpread2({}, tempSrvConfig), {}, {
@@ -533,7 +523,7 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
           }
         }, _callee6);
       }));
-      return function (_x5, _x6) {
+      return function (_x5, _x6, _x7) {
         return _ref7.apply(this, arguments);
       };
     }());
@@ -543,22 +533,19 @@ var Compiler = /*#__PURE__*/function (_CompilerBase) {
   return _createClass(Compiler);
 }(CompilerBase);
 
-var _excluded$2 = ["port"];
 var getDevServer = function getDevServer(serviceConfig) {
-  var configPort = serviceConfig.port,
-    extServiceConfig = _objectWithoutProperties(serviceConfig, _excluded$2);
-  var host = '127.0.0.1';
-  return _objectSpread2(_objectSpread2({
-    host: host,
+  return _objectSpread2({
+    host: '127.0.0.1',
     // 地址
+    port: '7777',
+    hot: true,
+    // 开启热更新
     open: false,
     // 是否自动打开，关闭
     setupExitSignals: true,
     // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
     compress: false,
     // gzip压缩,开发环境不开启,提升热更新速度
-    hot: true,
-    // 开启热更新
     historyApiFallback: true,
     // 解决history路由404问题
     // 托管静态资源public文件夹
@@ -570,9 +557,7 @@ var getDevServer = function getDevServer(serviceConfig) {
     headers: {
       'Access-Control-Allow-Origin': '*'
     }
-  }, extServiceConfig), {}, {
-    port: configPort || '7777'
-  });
+  }, serviceConfig);
 };
 
 var getDevtool = function getDevtool(envParams, devtoolConfig) {
@@ -762,10 +747,11 @@ var getOutput = function getOutput(envParams, output) {
   }, extOutput);
 };
 
-var _excluded = ["minimize", "template"];
+var _excluded = ["minimize", "template", "publicPath"];
 var getHtmlWebpackPlugin = function getHtmlWebpackPlugin(params) {
   var minimize = params.minimize,
     template = params.template,
+    publicPath = params.publicPath,
     extParams = _objectWithoutProperties(params, _excluded);
   return new HtmlWebpackPlugin(_objectSpread2({
     title: 'webpack5-react-ts',
@@ -774,6 +760,7 @@ var getHtmlWebpackPlugin = function getHtmlWebpackPlugin(params) {
     template: template || presetHtmlTemplate,
     inject: true,
     // 自动注入静态资源
+    publicPath: publicPath || '/',
     hash: true,
     cache: false,
     // 压缩html资源
@@ -870,14 +857,7 @@ var getReactPluginsPreset = function getReactPluginsPreset(envParams, options) {
   var action = envParams.action;
   var isDevelopment = action === 'server';
   var WebpackBundleAnalyzerOptions = options.WebpackBundleAnalyzerOptions,
-    HtmlWebpackPluginOptions = options.HtmlWebpackPluginOptions,
-    minimize = options.minimize;
-
-  // html入口文件路径
-  var rightFile = lookupFile(htmlEntryList);
-  if (!rightFile) {
-    cLog.warn('init', 'not_found', '未找到 html 入口文件，将使用预设配置');
-  }
+    cssFilename = options.cssFilename;
   var plugins = [getTsconfigPlugin(envParams)];
   if (!isDevelopment) {
     plugins.push(new ProgressPlugin({
@@ -891,15 +871,9 @@ var getReactPluginsPreset = function getReactPluginsPreset(envParams, options) {
       percentBy: 'entries'
     }));
   }
-  if (action !== 'lib') {
-    plugins.push(getHtmlWebpackPlugin(_objectSpread2({
-      minimize: minimize,
-      template: rightFile || undefined
-    }, HtmlWebpackPluginOptions)));
-  }
   if (!isDevelopment) {
     plugins.push(new WebpackBarPlugin(), new MiniCssExtractPlugin({
-      filename: 'css/main.[contenthash].css'
+      filename: cssFilename || 'css/main.[contenthash].css'
     }));
   }
   if (WebpackBundleAnalyzerOptions) {
@@ -928,10 +902,489 @@ var getResolveLoader = function getResolveLoader() {
   };
 };
 
-var createCompiler = function createCompiler(config) {
-  return webpack(config);
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackDevServerMw = function webpackDevServerMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$getDoraConfigSer = ctx.getDoraConfigServiceConfig(),
+          allowedHosts = _ctx$getDoraConfigSer.allowedHosts,
+          host = _ctx$getDoraConfigSer.host,
+          openBrowser = _ctx$getDoraConfigSer.openBrowser,
+          port = _ctx$getDoraConfigSer.port,
+          staticCfg = _ctx$getDoraConfigSer.static;
+        ctx.updateDevServerConfig(getDevServer({
+          allowedHosts: allowedHosts,
+          host: host,
+          port: port,
+          open: openBrowser,
+          static: Object.entries(staticCfg || {}).map(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              directory = _ref2[0],
+              publicPath = _ref2[1];
+            return {
+              directory: directory,
+              publicPath: publicPath
+            };
+          })
+        }));
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackDevtoolMw = function webpackDevtoolMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var devtool = getDevtool(ctx.envParams, ctx.geTDoraConfigWebpack().devtool);
+        ctx.updateWebpackConfig({
+          devtool: devtool
+        });
+        return next();
+      };
+    };
+  };
+};
+
+var envParamsMw = function envParamsMw(envParams) {
+  return function (ctx) {
+    return function (next) {
+      return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              ctx.updateEnvParams(envParams);
+              return _context.a(2, next());
+          }
+        }, _callee);
+      }));
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackExternalsMw = function webpackExternalsMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$getDoraConfig = ctx.getDoraConfig(),
+          userExternals = _ctx$getDoraConfig.externals;
+        var externals = getExternals(userExternals);
+        ctx.updateWebpackConfig({
+          externals: externals
+        });
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackEntryWholeMw = function webpackEntryWholeMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$getDoraConfig = ctx.getDoraConfig(),
+          input = _ctx$getDoraConfig.input;
+        if (!input) {
+          var pList = scriptEntryList.reduce(function (pre, f) {
+            scriptFileTypeList.forEach(function (e) {
+              pre.push('./' + f + e);
+            });
+            return pre;
+          }, []);
+          input = lookupFile(pList, ctx.envParams.workRootDir);
+        }
+        if (!input) {
+          cLog.warn('dora-wr', 'getEntry', '需要有一个入口文件 index 或者 src/index');
+          process.exit();
+        }
+        ctx.updateWebpackConfig({
+          entry: input
+        });
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * 处理 multiple
+ * - 1. multiple 变成多入口，多出口 的 entry格式
+ * - 2. 上下文一定要拆分过
+ */
+var multipleToInOutMw = function multipleToInOutMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$configCtx$getDor;
+        var _ctx$getDoraConfig = ctx.getDoraConfig(),
+          multiple = _ctx$getDoraConfig.multiple;
+        if (!multiple || !multiple.length) return next();
+        var entry = {};
+        var output = {
+          // 使用 hash 避免冲突
+          filename: '[name]/[chunkhash].js',
+          path: join(ctx.envParams.workRootDir, ((_ctx$configCtx$getDor = ctx.configCtx.getDoraConfig().output) === null || _ctx$configCtx$getDor === void 0 ? void 0 : _ctx$configCtx$getDor.path) || 'dist')
+        };
+        multiple.forEach(function (module) {
+          if (!module.name) {
+            cLog.warn('init', 'undefined', 'multiple 配置必须有 name 字段');
+            return;
+          }
+          entry[module.name] = module.input;
+        });
+        ctx.updateWebpackConfig({
+          entry: entry,
+          output: output
+        });
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackOutputMw = function webpackOutputMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$getDoraConfig = ctx.getDoraConfig(),
+          userOutput = _ctx$getDoraConfig.output,
+          clear = _ctx$getDoraConfig.clear;
+        // const { publicPath } = ctx.geTDoraConfigWebpack();
+        var output = getOutput(ctx.envParams, {
+          filename: userOutput.file,
+          path: userOutput.path,
+          clean: clear
+          // publicPath,
+        });
+        ctx.updateWebpackConfig({
+          output: output
+        });
+        return next();
+      };
+    };
+  };
+};
+
+var CompilerStatusPlugin = /*#__PURE__*/function () {
+  function CompilerStatusPlugin() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, CompilerStatusPlugin);
+    this.options = options;
+  }
+  return _createClass(CompilerStatusPlugin, [{
+    key: "apply",
+    value: function apply(compiler) {
+      var _this = this;
+      var startTime = 0;
+      var lastHash;
+      compiler.hooks.compile.tap('CompilerStatusPlugin', function () {
+        startTime = Date.now();
+        cLog.log('pack', 'start', 'compiling...');
+      });
+      compiler.hooks.invalid.tap('CompilerStatusPlugin', function (file) {
+        var rel = file ? relative(getCwd(), file) : 'unknown';
+        cLog.log('file', 'change', "\u27A9 ".concat(rel));
+        startTime = Date.now();
+      });
+      compiler.hooks.done.tap('CompilerStatusPlugin', function (stats) {
+        var time = Date.now() - startTime;
+        var hasErrors = stats.hasErrors();
+        var curHash = stats.hash;
+        if (_this.options.silentOnDoneWhenNoChange && lastHash && curHash === lastHash && !hasErrors) {
+          return;
+        }
+        lastHash = curHash;
+        if (hasErrors) {
+          var _json$errors;
+          var json = stats.toJson({
+            errors: true
+          });
+          cLog.error('pack', 'failed', "(".concat(((_json$errors = json.errors) === null || _json$errors === void 0 ? void 0 : _json$errors.length) || 0, " errors, ").concat(time, " ms)"));
+        } else {
+          var _json$warnings;
+          var _json = stats.toJson({
+            warnings: true
+          });
+          var warnCount = ((_json$warnings = _json.warnings) === null || _json$warnings === void 0 ? void 0 : _json$warnings.length) || 0;
+          if (warnCount > 0) {
+            cLog.warn('pack', 'warn', "(".concat(warnCount, " warnings, ").concat(time, " ms)"));
+          } else {
+            cLog.info('pack', 'done', "build complete (".concat(time, " ms)"));
+          }
+        }
+      });
+      compiler.hooks.failed.tap('CompilerStatusPlugin', function () {
+        cLog.error('pack', 'error', 'find error');
+      });
+    }
+  }]);
+}();
+
+var statsLevelMap = {
+  none: 'none',
+  error: 'errors-only',
+  warn: 'errors-warnings',
+  log: 'minimal',
+  info: 'normal',
+  verbose: 'normal'
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackLogLevelMw = function webpackLogLevelMw(logLevel) {
+  return function (ctx) {
+    return function (next) {
+      return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var _ctx$webpackConfig$pl;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              _context.n = 1;
+              return next();
+            case 1:
+              // 关闭构建统计与基础设施日志
+              ctx.updateWebpackConfig({
+                stats: statsLevelMap[logLevel || 'warn'],
+                infrastructureLogging: {
+                  level: logLevel
+                },
+                plugins: (_ctx$webpackConfig$pl = ctx.webpackConfig.plugins) === null || _ctx$webpackConfig$pl === void 0 ? void 0 : _ctx$webpackConfig$pl.concat([new CompilerStatusPlugin()])
+              });
+              ctx.updateDevServerConfig(deepMergeObject({
+                devMiddleware: {
+                  stats: 'errors-only'
+                },
+                client: {
+                  overlay: false
+                }
+              }, ctx.devServerConfig));
+            case 2:
+              return _context.a(2);
+          }
+        }, _callee);
+      }));
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackReactModuleMw = function webpackReactModuleMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$geTDoraConfigWeb = ctx.geTDoraConfigWebpack(),
+          loaderOptions = _ctx$geTDoraConfigWeb.loaderOptions;
+        var module = getReactModulePreset(ctx.envParams, {
+          postcssPluginExtra: loaderOptions === null || loaderOptions === void 0 ? void 0 : loaderOptions.postcssPluginExtra
+        });
+        ctx.updateWebpackConfig({
+          module: module
+        });
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackPlainMw = function webpackPlainMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var _ctx$geTDoraConfigWeb = ctx.geTDoraConfigWebpack(),
+          experiments = _ctx$geTDoraConfigWeb.experiments;
+        var _ctx$getDoraConfig = ctx.getDoraConfig(),
+          minimize = _ctx$getDoraConfig.minimize;
+        var mode = getMode(ctx.envParams);
+        var optimization = getOptimization({
+          minimize: minimize
+        });
+        var devtool = getDevtool(ctx.envParams);
+        ctx.updateWebpackConfig({
+          devtool: devtool,
+          mode: mode,
+          experiments: experiments,
+          optimization: optimization,
+          plugins: [],
+          module: {
+            rules: []
+          }
+        });
+        ctx.updateDevServerConfig({});
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * 替换 React 相关的插件配置
+ * @returns
+ */
+var webpackReactPluginMw = function webpackReactPluginMw(options) {
+  return function (ctx) {
+    return function (next) {
+      return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var plugins;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              plugins = getReactPluginsPreset(ctx.envParams, options || {});
+              ctx.updateWebpackConfig({
+                plugins: plugins
+              });
+              return _context.a(2, next());
+          }
+        }, _callee);
+      }));
+    };
+  };
+};
+
+/**
+ * 替换 React 相关的插件配置
+ * @returns
+ */
+var webpackMultipleReactPluginMw = function webpackMultipleReactPluginMw() {
+  return function (ctx) {
+    return function (next) {
+      return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var plugins;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              plugins = getReactPluginsPreset(ctx.envParams, {
+                cssFilename: '[name]/[chunkhash].css'
+              });
+              ctx.updateWebpackConfig({
+                plugins: plugins
+              });
+              return _context2.a(2, next());
+          }
+        }, _callee2);
+      }));
+    };
+  };
+};
+
+/**
+ * 添加 HtmlWebpackPlugin 插件配置
+ * @returns
+ */
+var webpackHtmlPluginMw = function webpackHtmlPluginMw() {
+  return function (ctx) {
+    return function (next) {
+      return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+        var cdnConfig, action, _ctx$getDoraConfig, minimize, plugins, pluginsRes, rightFile;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              cdnConfig = ctx.configCtx.getCdnConfig();
+              action = ctx.envParams.action;
+              _ctx$getDoraConfig = ctx.getDoraConfig(), minimize = _ctx$getDoraConfig.minimize;
+              plugins = ctx.webpackConfig.plugins;
+              pluginsRes = plugins ? plugins : []; // html入口文件路径
+              rightFile = lookupFile(htmlEntryList);
+              if (!rightFile) {
+                cLog.warn('init', 'not_found', '未找到 html 入口文件，将使用预设配置');
+              }
+              if (action !== 'lib') {
+                pluginsRes.push(getHtmlWebpackPlugin(_objectSpread2({
+                  minimize: minimize,
+                  template: rightFile || undefined
+                }, cdnConfig)));
+              }
+              ctx.updateWebpackConfig({
+                plugins: pluginsRes
+              });
+              return _context3.a(2, next());
+          }
+        }, _callee3);
+      }));
+    };
+  };
+};
+
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackResolveMw = function webpackResolveMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var tsConfig = ctx.configCtx.getTsConfig();
+        var _ctx$geTDoraConfigWeb = ctx.geTDoraConfigWebpack(),
+          userConfigResolve = _ctx$geTDoraConfigWeb.resolve;
+        var injectAlias = get(userConfigResolve, 'alias', {});
+        var injectExtensions = get(userConfigResolve, 'extensions', []);
+        var tsAlias = getTsPathAlias(tsConfig);
+        var resolveObj = {
+          extensions: Array.from(new Set(['.ts', '.tsx', '.js', '.jsx'].concat(_toConsumableArray(injectExtensions)))),
+          alias: _objectSpread2(_objectSpread2({
+            '@src': resolve('src'),
+            '@': resolve('src')
+          }, tsAlias), injectAlias)
+        };
+        ctx.updateWebpackConfig({
+          resolve: resolveObj
+        });
+        return next();
+      };
+    };
+  };
 };
 
+/**
+ * webpack dev server 配置 中间件
+ * @returns
+ */
+var webpackResolveLoaderMw = function webpackResolveLoaderMw() {
+  return function (ctx) {
+    return function (next) {
+      return function () {
+        var resolveLoader = getResolveLoader();
+        ctx.updateWebpackConfig({
+          resolveLoader: resolveLoader
+        });
+        return next();
+      };
+    };
+  };
+};
+
+/**
+ * 单任务上下文
+ */
 var Ctx = /*#__PURE__*/function () {
   function Ctx(configCtx) {
     _classCallCheck(this, Ctx);
@@ -969,62 +1422,302 @@ var Ctx = /*#__PURE__*/function () {
     value: function geTDoraConfigWebpack() {
       return this.configCtx.getDoraConfig().webpackConfig || {};
     }
+  }, {
+    key: "getDoraConfigServiceConfig",
+    value: function getDoraConfigServiceConfig() {
+      return this.configCtx.getDoraConfig().serviceConfig || {};
+    }
   }]);
 }();
 
-var presetWebpackConfig = {
-  host: '127.0.0.1',
-  open: true,
-  // 是否自动打开，关闭
-  setupExitSignals: true,
-  // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
-  compress: false,
-  // gzip压缩,开发环境不开启,提升热更新速度
-  hot: true,
-  // 开启热更新
-  historyApiFallback: true,
-  // 解决history路由404问题
-  static: [{
-    directory: resolveCwd('./public') // 托管静态资源public文件夹
-  }, {
-    directory: resolveCwd('./dist') // 托管静态资源public文件夹
-  }],
-  headers: {
-    'Access-Control-Allow-Origin': '*'
-  },
-  port: '8082'
-};
+function collectAssetUrls(compiler, onChange, options) {
+  var _ref = options || {},
+    hostname = _ref.hostname,
+    port = _ref.port;
+  var urls = {};
+  compiler.hooks.done.tap('CollectAssetUrls', function (stats) {
+    var _compiler$options$out;
+    urls = {};
+    var json = stats.toJson({
+      assets: true,
+      entrypoints: true
+    });
+    // 处理 publicPath
+    var publicPath = ((_compiler$options$out = compiler.options.output) === null || _compiler$options$out === void 0 ? void 0 : _compiler$options$out.publicPath) || '/';
+    if (!publicPath || publicPath === 'auto') publicPath = '/';
+    publicPath = publicPath.endsWith('/') ? publicPath.slice(0, -1) : publicPath;
+    Object.entries(json.entrypoints || {}).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        entry = _ref3[1];
+      var moduleName = entry.name || 'unknown';
+      urls[moduleName] = urls[moduleName] || {
+        runtimeChunks: [],
+        name: moduleName,
+        scripts: [],
+        styles: []
+      };
+      (entry.assets || []).forEach(function (a) {
+        var name = a.name || a;
+        if (typeof name !== 'string') return;
+        var link = uri.combine({
+          protocol: hostname ? 'http:' : undefined,
+          hostname: hostname,
+          port: port,
+          pathname: uri.pathJoin(publicPath, name)
+        });
+        if (name.includes('.hot-update.')) {
+          urls[moduleName].runtimeChunks.push(link);
+          return;
+        }
+        if (name.endsWith('.js')) urls[moduleName].scripts.push(link);
+        if (name.endsWith('.css')) urls[moduleName].styles.push(link);
+      });
+    });
+    onChange === null || onChange === void 0 || onChange(urls);
+  });
+  return function () {
+    return urls;
+  }; // 返回一个 getter
+}
 
-/**
- * 启动服务
- * @param options
- * @param compiler
- */
-var service = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(options, compiler) {
-    var tempSrvConfig, open, port, host, devServer;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
+var htmlRouteGeneratorMw = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(htmlAssetManager, configCtx) {
+    var _cdnConfig$headAfterS, _cdnConfig$headAfterS2, _cdnConfig$bodyAfterS;
+    var defaultHtml, htmlManage, cdnConfig;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
         case 0:
-          tempSrvConfig = mergeServerConfig(presetWebpackConfig, options);
-          open = tempSrvConfig.open, port = tempSrvConfig.port, host = tempSrvConfig.host;
-          devServer = new WebpackDevServer(mergeServerConfig(_objectSpread2(_objectSpread2({}, tempSrvConfig), {}, {
-            open: false
-          })), compiler);
-          _context.n = 1;
-          return devServer.start();
+          _context2.n = 1;
+          return getDefaultHtml(configCtx.getWorkRoot());
         case 1:
-          if (open) {
-            openBrowser("http://".concat(host, ":").concat(port));
-          }
-        case 2:
-          return _context.a(2);
+          defaultHtml = _context2.v;
+          htmlManage = new HtmlManage(HtmlManage.parseHtml(defaultHtml));
+          cdnConfig = configCtx.getCdnConfig();
+          htmlManage.addHeads((_cdnConfig$headAfterS = cdnConfig.headAfterScript) === null || _cdnConfig$headAfterS === void 0 ? void 0 : _cdnConfig$headAfterS.map(function (script) {
+            return {
+              tagName: 'script',
+              attrs: [{
+                name: 'src',
+                value: script
+              }]
+            };
+          }));
+          htmlManage.addHeads((_cdnConfig$headAfterS2 = cdnConfig.headAfterStyle) === null || _cdnConfig$headAfterS2 === void 0 ? void 0 : _cdnConfig$headAfterS2.map(function (style) {
+            return {
+              tagName: 'link',
+              attrs: [{
+                name: 'href',
+                value: style
+              }, {
+                name: 'rel',
+                value: 'stylesheet'
+              }]
+            };
+          }));
+          htmlManage.addBodys((_cdnConfig$bodyAfterS = cdnConfig.bodyAfterScript) === null || _cdnConfig$bodyAfterS === void 0 ? void 0 : _cdnConfig$bodyAfterS.map(function (script) {
+            return {
+              tagName: 'script',
+              attrs: [{
+                name: 'src',
+                value: script
+              }]
+            };
+          }));
+          return _context2.a(2, /*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(req, res, next) {
+              var targetModuleName, moduleAsset, moduleHtmlManage, htmlStr, dynamicHtml;
+              return _regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    /**
+                     * 1. 页面路由
+                     * - 单页面应用会拦截到 index
+                     */
+                    targetModuleName = htmlAssetManager.assetList.find(function (moduleName) {
+                      return new RegExp("^".concat(uri.pathJoin(htmlAssetManager.publicPath, moduleName === 'index' ? '' : moduleName), "(/)?")).test(req.url || '');
+                    });
+                    if (!targetModuleName) {
+                      _context.n = 2;
+                      break;
+                    }
+                    _context.n = 1;
+                    return htmlAssetManager.getModuleHtml(targetModuleName);
+                  case 1:
+                    moduleAsset = htmlAssetManager.getModuleAsset(targetModuleName);
+                    moduleHtmlManage = htmlManage.copy();
+                    moduleHtmlManage.addHeads(moduleAsset.styles.map(function (style) {
+                      return {
+                        tagName: 'link',
+                        attrs: [{
+                          name: 'href',
+                          value: style
+                        }, {
+                          name: 'rel',
+                          value: 'stylesheet'
+                        }]
+                      };
+                    }));
+                    moduleHtmlManage.addBodys(moduleAsset.scripts.map(function (script) {
+                      return {
+                        tagName: 'script',
+                        attrs: [{
+                          name: 'src',
+                          value: script
+                        }]
+                      };
+                    }));
+                    htmlStr = moduleHtmlManage.generateHtml();
+                    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                    res.end(htmlStr);
+                    return _context.a(2);
+                  case 2:
+                    if (!new RegExp("^".concat(uri.pathJoin(htmlAssetManager.publicPath, 'assetMap'), "(/)?$")).test(req.url || '')) {
+                      _context.n = 3;
+                      break;
+                    }
+                    res.setHeader('Content-Type', 'application/json; charset=utf-8');
+                    res.end(JSON.stringify(htmlAssetManager.getAssetMap()));
+                    return _context.a(2);
+                  case 3:
+                    if (!new RegExp("^".concat(uri.pathJoin(htmlAssetManager.publicPath), "(/)?$")).test(req.url || '')) {
+                      _context.n = 4;
+                      break;
+                    }
+                    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                    dynamicHtml = new DynamicHtml();
+                    dynamicHtml.addHeadTags(["\n            <style>\n      .item {\n        margin: 8px 0;\n        background-color: #6790ff;\n        border-radius: 4px;\n      }\n      .item a {\n        display: block;\n        padding: 4px 8px;\n        color: #fff;\n        font-size: 18px;\n        text-decoration: none;\n      }\n            </style>\n          "]);
+                    dynamicHtml.addBodyTags(htmlAssetManager.assetList.map(function (name) {
+                      return "<div class=\"item\">\n                <a href=\"".concat(uri.pathJoin(htmlAssetManager.publicPath, name), "\">\n                  ").concat(name, "\n                </a>\n              </div>");
+                    }));
+                    dynamicHtml.addBodyTags(["<div class=\"item\"><a href=\"".concat(uri.pathJoin(htmlAssetManager.publicPath, 'assetMap'), "\">\u8D44\u6E90</a></div>")]);
+                    res.end(dynamicHtml.generateHtmlTemplate('server 页面'));
+                    return _context.a(2);
+                  case 4:
+                    next();
+                  case 5:
+                    return _context.a(2);
+                }
+              }, _callee);
+            }));
+            return function (_x3, _x4, _x5) {
+              return _ref2.apply(this, arguments);
+            };
+          }());
       }
-    }, _callee);
+    }, _callee2);
   }));
-  return function service(_x, _x2) {
+  return function htmlRouteGeneratorMw(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
 
-export { Compiler, Ctx, babelLoader, build, createCompiler, cssLoader, getBabelConfig, getCssBaseLoader, getDevServer, getDevtool, getEntry, getExternals, getHtmlWebpackPlugin, getMode, getOptimization, getOutput, getReactModulePreset, getReactPluginsPreset, getResolve, getResolveLoader, getTsconfigPlugin, lessLoader, mergeServerConfig, mergeWebpackConfig, postcssLoader, postcssPresetEnv, sassLoader, service, styleLoader };
+var ignorCompareKeys = ['name', 'input', 'output'];
+/**
+ * 根据配置分组
+ * @param multiple
+ * @returns
+ */
+var splitDoraConfigMultiple = function splitDoraConfigMultiple(multiple) {
+  var res = [];
+
+  // 初步分组
+  var groupCatch = {};
+  multiple.forEach(function (item) {
+    var split = item.split,
+      output = item.output;
+    /** 环境隔离的单独放置 */
+    if (split || output !== null && output !== void 0 && output.file) {
+      res.push([item]);
+      return;
+    }
+    // 按照配置的key 进行初步分组
+    var key = Object.keys(item).join('--') + ((output === null || output === void 0 ? void 0 : output.path) || '');
+    groupCatch[key] || (groupCatch[key] = {
+      configs: []
+    });
+    groupCatch[key].configs.push(item);
+  });
+
+  // 细化比较分组
+  Object.values(groupCatch).forEach(function (_ref) {
+    var configs = _ref.configs;
+    var list = [];
+    configs.forEach(function (config) {
+      var isAdded = false;
+      for (var i = 0; i < list.length; i++) {
+        var group = list[i] || [];
+        // 判断configs与哪个分组相等
+        if (checkIsSameConfig(group[0], config)) {
+          group.push(config);
+          isAdded = true;
+          break;
+        }
+      }
+      // 没有匹配到相等的分组，则新建一个分组
+      if (!isAdded) {
+        list.push([config]);
+      }
+    });
+    res.push.apply(res, list);
+  });
+  return res;
+};
+
+/**
+ * 判断配置是否相等
+ * @param a
+ * @param b
+ * @returns
+ */
+var checkIsSameConfig = function checkIsSameConfig(a, b) {
+  if (!a || !b) return false;
+  var aKeys = Object.keys(a).filter(function (key) {
+    return !ignorCompareKeys.includes(key);
+  });
+  var bKeys = Object.keys(b).filter(function (key) {
+    return !ignorCompareKeys.includes(key);
+  });
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  for (var i = 0; i < aKeys.length; i++) {
+    var key = aKeys[i];
+    if (!deepCompareJson(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * 把配置拆分成多个标准的配置上下文，使用于webpack
+ * - 主要是拆分成不同的入口输出分组
+ * @param configCtx
+ */
+var splitDoraConfig = function splitDoraConfig(configCtx) {
+  var doraConfig = configCtx.getDoraConfig();
+  var multipleConfigList = doraConfig.multiple || [];
+
+  // 1. 单模块格式化成多模块形式
+  if (!multipleConfigList.length) {
+    multipleConfigList.push({
+      name: 'index',
+      input: doraConfig.input,
+      output: doraConfig.output
+    });
+  }
+
+  // 2. multiple 按照一定规则分组
+  var multipleGroups = splitDoraConfigMultiple(multipleConfigList);
+
+  // 3. 分组后合并公共配置，生成多个标准配置上下文
+  return multipleGroups.map(function (group) {
+    var newConfigCtx = configCtx.copy();
+    newConfigCtx.setDoraConfig(_objectSpread2(_objectSpread2(_objectSpread2({}, doraConfig), obj.omit(group[0], ['input', 'output'])), {}, {
+      multiple: group
+    }));
+    return newConfigCtx;
+  });
+};
+
+export { Compiler, Ctx, babelLoader, collectAssetUrls, cssLoader, envParamsMw, getBabelConfig, getCssBaseLoader, getDevServer, getDevtool, getEntry, getExternals, getHtmlWebpackPlugin, getMode, getOptimization, getOutput, getReactModulePreset, getReactPluginsPreset, getResolve, getResolveLoader, getTsconfigPlugin, htmlRouteGeneratorMw, lessLoader, mergeServerConfig, mergeWebpackConfig, multipleToInOutMw, postcssLoader, postcssPresetEnv, sassLoader, splitDoraConfig, splitDoraConfigMultiple, styleLoader, webpackDevServerMw, webpackDevtoolMw, webpackEntryWholeMw, webpackExternalsMw, webpackHtmlPluginMw, webpackLogLevelMw, webpackMultipleReactPluginMw, webpackOutputMw, webpackPlainMw, webpackReactModuleMw, webpackReactPluginMw, webpackResolveLoaderMw, webpackResolveMw };