@zohodesk/react-cli 0.0.1-beta.17 → 0.0.1-beta.170

package/lib/pluginUtils/getProdPlugins.js

@@ -1,76 +1,283 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _webpack = require('webpack');
+var _path = _interopRequireDefault(require("path"));
 
-var _webpack2 = _interopRequireDefault(_webpack);
+var _fs = _interopRequireDefault(require("fs"));
 
-var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
+var _webpack = _interopRequireDefault(require("webpack"));
 
-var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
 
-var _webpackBundleAnalyzer = require('webpack-bundle-analyzer');
+var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
 
-var _miniCssExtractPlugin = require('mini-css-extract-plugin');
+var _lodashWebpackPlugin = _interopRequireDefault(require("lodash-webpack-plugin"));
 
-var _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
+var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _webpackManifestPlugin = require('webpack-manifest-plugin');
+var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugin"));
 
-var _webpackManifestPlugin2 = _interopRequireDefault(_webpackManifestPlugin);
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _plugins = require('../plugins');
+var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
+
+var _plugins = require("../plugins");
 
-var getProdPlugins = function getProdPlugins(options) {
-  var _options$app = options.app,
-      enableChunkHash = _options$app.enableChunkHash,
-      manifestFileName = _options$app.manifestFileName,
-      bundleAnalyze = _options$app.bundleAnalyze,
-      optimize = _options$app.optimize;
+var _common = require("../common");
 
+var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
-  var plugins = [
-  //new webpack.optimize.ModuleConcatenationPlugin(),
-  new _caseSensitivePathsWebpackPlugin2.default(), new _webpack2.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack2.default.DefinePlugin({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line no-unused-vars
+let getProdPlugins = (options, publicPath = '') => {
+  let {
+    enableChunkHash,
+    manifestFileName,
+    bundleAnalyze,
+    optimize,
+    publicPaths,
+    hasEFC: prevOptionForEnableEFC,
+    enableSMapHook,
+    tpFolder,
+    folder,
+    outputFolder,
+    context,
+    enableSMap,
+    server: {
+      mode
+    },
+    hasShadowDOM,
+    resourceHints,
+    serviceWorker,
+    htmlTemplate: {
+      inject
+    },
+    tpHashMapping,
+    cdnMapping,
+    crossorigin
+  } = options.app;
+  const {
+    i18n
+  } = options;
+  const {
+    enableRTLSplit
+  } = options.css;
+  const {
+    hasEFC: newOptionForEnableEFC,
+    nameScope: efcNameSpace,
+    templateFilePath,
+    localeAttr: efcLocaleAttr
+  } = options.efc;
+  const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
+  const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
+  const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
+  const cssRTLFileNameTempalte = `css/[name]${hashTempalate}.rtl.css`;
+  let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
+  enableChunkHash = !isDevelopment && enableChunkHash;
+  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
-    __LOCAL_PRODUCTION__: process.isDevelopment,
+    __LOCAL_PRODUCTION__: isDevelopment,
     __DOCS__: false,
     'process.env': {
       NODE_ENV: JSON.stringify('production')
     },
     __SERVER__: false
-  }), new _plugins.RuntimePublicPathPlgin({
-    publicPathCallback: 'window.setPublicPath'
-  }), new _miniCssExtractPlugin2.default({
-    // Options similar to the same options in webpackOptions.output
-    // both options are optional
-    filename: enableChunkHash ? '[name].[chunkhash:20].css' : '[name].css',
-    chunkFilename: enableChunkHash ? '[name].[chunkhash:20].css' : '[name].css'
-  })];
-
-  if (!process.isDevelopment) {
-    plugins.push(new _plugins.SourceMapHookPlugin({
-      optimize: optimize
+  }), new _miniCssExtractPlugin.default({
+    // ignoreOrder: true,
+    filename: cssLTRFileNameTempalte,
+    chunkFilename: cssLTRFileNameTempalte
+  }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
+
+  if (enableRTLSplit) {
+    plugins.push(new _RtlCssPlugin.RtlCssPlugin({
+      templateLabel: options.css.templateLabel,
+      disableMiniFiySelector: options.css.disableMiniFiySelector,
+      dirVarName: options.css.dirVarName,
+      // config: {},
+      // sourcemap: true,
+      filename: cssRTLFileNameTempalte
+    }));
+  }
+
+  const i18nManifestFileName = 'i18n-manifest.json';
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
+   */
+
+  const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';
+  const i18nPublicPath = Array.isArray(publicPaths) && !cdnMapping.isCdnEnabled ? publicPaths['4'] : ''; // const  i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[contentHash]_.js';
+  // const  i18nFileNameTemplate = 'i18n-chunk/[locale]/[name]_.js';
+
+  if (i18n.chunkSplitEnable) {
+    plugins.push(new _I18nSplitPlugin.default({
+      jsResource: i18n.jsResource,
+      localeVarName: i18n.localeVarName,
+      jsonpFunc: i18n.jsonpFunc,
+      disableDefault: i18n.disableDefault,
+      publicPath: i18nPublicPath,
+      i18nManifestFileName,
+      // template: (object, locale) => `window.loadI18n(${JSON.stringify(object)}, ${JSON.stringify(locale)})`,
+      filenameTemplate: i18nFileNameTemplate,
+      propertiesFolder: i18n.propertiesFolder
+    }));
+  } else {
+    let i18nPath = _path.default.join(process.cwd(), context, 'i18n');
+
+    if (_fs.default.existsSync(i18nPath)) {
+      plugins.push(new _copyWebpackPlugin.default([{
+        from: `${i18nPath}/`,
+        to: enableChunkHash ? './i18n/[name].[hash:20]_.[ext]' : './i18n/[name]_.[ext]',
+        toType: 'template'
+      }]));
+    }
+  }
+
+  tpFolder && plugins.push(new _copyWebpackPlugin.default([{
+    from: `${_path.default.join(process.cwd(), context, tpFolder)}/`,
+    to: `./${tpFolder}/`,
+    toType: 'dir'
+  }]));
+
+  if (hasEFC) {
+    plugins.push(new _htmlWebpackPlugin.default({
+      chunksSortMode: 'none',
+      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
+      template: _path.default.join(process.cwd(), folder, 'index.html'),
+      excludeChunks: ['efc', 'widget'],
+      minify: false,
+      templateParameters: _common.templateParameters,
+      scriptLoading: 'defer',
+      inject: inject
+    }));
+    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
+      crossorigin: 'anonymous'
     }));
+    plugins.push(new _plugins.EFCPlugin({
+      isDevelopment,
+      serverUrl: publicPath,
+      i18nFileNameTemplate,
+      templateFilePath,
+      i18nManifestFileName,
+      entryPointName: 'efc',
+      // outputFile: 'zohodesk-efc-sdk-latest.js',
+      nameScope: efcNameSpace,
+      localeAttr: efcLocaleAttr,
+      cdnVariableName: cdnMapping.isCdnEnabled ? cdnMapping.variableName : null
+    }));
+  } else {
+    plugins.push(new _htmlWebpackPlugin.default({
+      chunksSortMode: 'none',
+      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
+      template: _path.default.join(process.cwd(), folder, 'index.html'),
+      minify: false,
+      templateParameters: _common.templateParameters,
+      scriptLoading: 'defer',
+      inject: inject
+    }));
+    crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
+      crossorigin: 'anonymous'
+    }));
+  }
+
+  plugins.push(new _plugins.I18NInjectIntoIndexPlugin({
+    // Because we  will handle cdn url in CdnChangePlugin
+    publicPath: cdnMapping.isCdnEnabled ? '' : i18nPublicPath,
+    isDevelopment,
+    templateLabel: i18n.templateLabel || '{{--user-locale}}',
+    i18nFileNameTemplate,
+    i18nManifestFileName,
+    mainChunkName: 'main'
+  }));
+
+  if (publicPaths && !isDevelopment && !cdnMapping.isCdnEnabled) {
+    let {
+      callback
+    } = publicPaths;
+    plugins.push(callback ? new _plugins.PublicPathCallbackPlugin({
+      callback
+    }) : new _plugins.PublicPathChangePlugin({
+      publicPaths,
+      resourceHints
+    }));
+  }
+
+  if (cdnMapping.isCdnEnabled) {
+    plugins.push(new _plugins.CdnChangePlugin(cdnMapping));
+  }
 
-    plugins.push(new _webpackManifestPlugin2.default({
+  plugins.push(new _lodashWebpackPlugin.default({
+    collections: true,
+    shorthands: true
+  }));
+  hasShadowDOM && plugins.push(new _plugins.ShadowDOMSupportPlugin());
+
+  if (!isDevelopment) {
+    enableSMap && enableSMapHook && plugins.push(new _plugins.SourceMapHookPlugin());
+    optimize && plugins.push(new _plugins.OptimizeJSPlugin());
+    plugins.push(new _plugins.ManifestPlugin({
       fileName: manifestFileName
     }));
 
     if (bundleAnalyze) {
       plugins.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
-        analyzerMode: 'static'
+        analyzerMode: 'static',
+        generateStatsFile: true,
+        openAnalyzer: false,
+        statsOptions: {
+          source: false,
+          normal: true,
+          chunks: false,
+          chunkGroups: false,
+          module: false,
+          assets: true,
+          assetsSort: 'name'
+        }
+      })); // plugins.push(new ReportGeneratePlugin());
+    }
+
+    if (tpHashMapping && tpHashMapping.length > 0) {
+      plugins.push(new _plugins.TPHashMappingPlugin({
+        fileMappings: tpHashMapping,
+        tpFolder: `${_path.default.join(process.cwd(), context, tpFolder)}/`
       }));
     }
   }
 
+  if (!isDevelopment && serviceWorker.enableSw) {
+    let {
+      filePath,
+      fileName = 'sw.js',
+      exitPath = '/',
+      replaceText = '@@'
+    } = serviceWorker;
+
+    if (!filePath) {
+      throw new Error('File Path required for service worker plugin');
+    }
+
+    plugins.push(new _plugins.ServiceWorkerPlugin({
+      filePath: _path.default.join(process.cwd(), filePath),
+      i18nFileNameTemplate,
+      fileName: fileName,
+      exitPath: _path.default.join(outputFolder, exitPath),
+      replaceText,
+      publicPaths
+    }));
+  }
+
   return plugins;
 };
 
-exports.default = getProdPlugins;
+var _default = getProdPlugins;
+exports.default = _default;

package/lib/pluginUtils/getServerPlugins.js

@@ -1,28 +1,25 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _webpack = require('webpack');
+var _webpack = _interopRequireDefault(require("webpack"));
 
-var _webpack2 = _interopRequireDefault(_webpack);
-
-var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
-
-var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getProdPlugins = function getProdPlugins() {
-  var plugins = [new _webpack2.default.optimize.ModuleConcatenationPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _webpack2.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack2.default.DefinePlugin({
+let getProdPlugins = () => {
+  let plugins = [new _webpack.default.optimize.ModuleConcatenationPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: true,
     __DOCS__: false,
     __SERVER__: true
   })];
-
   return plugins;
 };
 
-exports.default = getProdPlugins;
+var _default = getProdPlugins;
+exports.default = _default;

package/lib/pluginUtils/getUMDCSSPlugins.js

@@ -1,25 +1,22 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
+var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
 
-var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _miniCssExtractPlugin = require('mini-css-extract-plugin');
+var _plugins = require("../plugins");
 
-var _miniCssExtractPlugin2 = _interopRequireDefault(_miniCssExtractPlugin);
-
-var _webpack = require('webpack');
-
-var _webpack2 = _interopRequireDefault(_webpack);
+var _webpack = _interopRequireDefault(require("webpack"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getUMDCSSPlugins = function getUMDCSSPlugins() {
-  var plugins = [new _caseSensitivePathsWebpackPlugin2.default(), new _webpack2.default.DefinePlugin({
+let getUMDCSSPlugins = () => {
+  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
     __DOCS__: false,
@@ -27,13 +24,12 @@ var getUMDCSSPlugins = function getUMDCSSPlugins() {
       NODE_ENV: JSON.stringify('production')
     },
     __SERVER__: false
-  }), new _miniCssExtractPlugin2.default({
-    // Options similar to the same options in webpackOptions.output
-    // both options are optional
-    filename: '[name].css',
-    chunkFilename: '[id].css'
-  })];
+  }), new _miniCssExtractPlugin.default({
+    filename: 'css/[name].css',
+    chunkFilename: 'css/[id].css'
+  }), new _plugins.UglifyCSSPlugin()];
   return plugins;
 };
 
-exports.default = getUMDCSSPlugins;
+var _default = getUMDCSSPlugins;
+exports.default = _default;

package/lib/pluginUtils/getUMDComponentPlugins.js

@@ -1,21 +1,22 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
+var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
 
-var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+var _webpack = _interopRequireDefault(require("webpack"));
 
-var _webpack = require('webpack');
+var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _webpack2 = _interopRequireDefault(_webpack);
+var _plugins = require("../plugins");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var getUMDComponentPlugins = function getUMDComponentPlugins(isDocs) {
-  var plugins = [new _caseSensitivePathsWebpackPlugin2.default(), new _webpack2.default.DefinePlugin({
+let getUMDComponentPlugins = isDocs => {
+  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
     __DOCS__: isDocs ? true : false,
@@ -23,8 +24,12 @@ var getUMDComponentPlugins = function getUMDComponentPlugins(isDocs) {
       NODE_ENV: JSON.stringify('production')
     },
     __SERVER__: false
-  })];
+  }), new _miniCssExtractPlugin.default({
+    filename: 'css/[name].css',
+    chunkFilename: 'css/[name].css'
+  }), new _plugins.UglifyCSSPlugin()];
   return plugins;
 };
 
-exports.default = getUMDComponentPlugins;
+var _default = getUMDComponentPlugins;
+exports.default = _default;

package/lib/pluginUtils/index.js

@@ -1,70 +1,63 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _getDevPlugins = require('./getDevPlugins');
-
-Object.defineProperty(exports, 'getDevPlugins', {
+Object.defineProperty(exports, "getDevPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getDevPlugins).default;
+  get: function () {
+    return _getDevPlugins.default;
   }
 });
-
-var _getProdPlugins = require('./getProdPlugins');
-
-Object.defineProperty(exports, 'getProdPlugins', {
+Object.defineProperty(exports, "getDocsPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getProdPlugins).default;
+  get: function () {
+    return _getDocsPlugins.default;
   }
 });
-
-var _getDocsPlugins = require('./getDocsPlugins');
-
-Object.defineProperty(exports, 'getDocsPlugins', {
+Object.defineProperty(exports, "getLibraryPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getDocsPlugins).default;
+  get: function () {
+    return _getLibraryPlugins.default;
   }
 });
-
-var _getServerPlugins = require('./getServerPlugins');
-
-Object.defineProperty(exports, 'getServerPlugins', {
+Object.defineProperty(exports, "getProdPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getServerPlugins).default;
+  get: function () {
+    return _getProdPlugins.default;
   }
 });
-
-var _getLibraryPlugins = require('./getLibraryPlugins');
-
-Object.defineProperty(exports, 'getLibraryPlugins', {
+Object.defineProperty(exports, "getServerPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getLibraryPlugins).default;
+  get: function () {
+    return _getServerPlugins.default;
   }
 });
-
-var _getUMDComponentPlugins = require('./getUMDComponentPlugins');
-
-Object.defineProperty(exports, 'getUMDComponentPlugins', {
+Object.defineProperty(exports, "getUMDCSSPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getUMDComponentPlugins).default;
+  get: function () {
+    return _getUMDCSSPlugins.default;
   }
 });
-
-var _getUMDCSSPlugins = require('./getUMDCSSPlugins');
-
-Object.defineProperty(exports, 'getUMDCSSPlugins', {
+Object.defineProperty(exports, "getUMDComponentPlugins", {
   enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_getUMDCSSPlugins).default;
+  get: function () {
+    return _getUMDComponentPlugins.default;
   }
 });
 
+var _getDevPlugins = _interopRequireDefault(require("./getDevPlugins"));
+
+var _getProdPlugins = _interopRequireDefault(require("./getProdPlugins"));
+
+var _getDocsPlugins = _interopRequireDefault(require("./getDocsPlugins"));
+
+var _getServerPlugins = _interopRequireDefault(require("./getServerPlugins"));
+
+var _getLibraryPlugins = _interopRequireDefault(require("./getLibraryPlugins"));
+
+var _getUMDComponentPlugins = _interopRequireDefault(require("./getUMDComponentPlugins"));
+
+var _getUMDCSSPlugins = _interopRequireDefault(require("./getUMDCSSPlugins"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/plugins/CdnChangePlugin.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MODULE_TYPE = 'css/mini-extract';
+
+const isI18nFile = url => url.endsWith('.i18n.js');
+
+const {
+  app: {
+    enableSMap
+  }
+} = (0, _utils.getOptions)();
+
+class CdnChangePlugin {
+  constructor(options) {
+    this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
+    this.variableName = options.variableName || '__CSS_CDN__';
+    this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
+    this.jsTemplate = options.jsTemplate || '{{__JS_CDN__}}';
+  }
+
+  getCssChunkObject(mainChunk) {
+    const obj = {};
+
+    for (const chunk of mainChunk.getAllAsyncChunks()) {
+      for (const module of chunk.modulesIterable) {
+        if (module.type === MODULE_TYPE) {
+          obj[chunk.id] = 1;
+          break;
+        }
+      }
+    }
+
+    return obj;
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('CdnChangePlugin', compilation => {
+      compilation.mainTemplate.hooks.requireEnsure.tap('CdnChangePlugin', (source, chunk) => {
+        const chunkMap = this.getCssChunkObject(chunk);
+
+        if (Object.keys(chunkMap).length > 0) {
+          return source.replace('__webpack_require__.p', `window['${this.variableName}']`);
+        }
+      });
+    });
+    compiler.hooks.make.tap('CdnChangePlugin', compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync('CdnChangePlugin', (data, cb) => {
+        data.assets = Object.assign({}, data.assets, {
+          css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
+          js: data.assets.js.map(js => {
+            if (enableSMap && !isI18nFile(js)) {
+              js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+            }
+
+            return `${isI18nFile(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
+          })
+        });
+        cb(null, data);
+      });
+    });
+  }
+
+}
+
+var _default = CdnChangePlugin;
+exports.default = _default;

package/lib/plugins/CleanupStatsPlugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class CleanUpStatsPlugin {
+  shouldPickStatChild(child) {
+    return child.name.indexOf('mini-css-extract-plugin') !== 0;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
+      const {
+        children
+      } = stats.compilation;
+
+      if (Array.isArray(children)) {
+        // eslint-disable-next-line no-param-reassign
+        stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
+      }
+    });
+  }
+
+}
+
+exports.default = CleanUpStatsPlugin;