优化webpack打包并解决消费方字体图标加载问题

Author: Jason-chen-coder

vue-app1/src/App.vue

@@ -4,7 +4,7 @@
  * @Author: Jason chen
  * @Date: 2021-08-18 15:09:23
  * @LastEditors: Jason chen
- * @LastEditTime: 2021-09-06 16:09:26
+ * @LastEditTime: 2021-09-07 10:57:13
 -->
 <template>
   <div class="vue-app1">
@@ -15,7 +15,8 @@
     <div>引入图片:<img src="./assets/images/webpackimage.png" alt="" /></div>
     <div>引入字体图标(CSS):<span class="iconfont icon-zuhe"></span></div>
     <div>
-      引入字体图标(JS):<svg class="icon" aria-hidden="true">
+      引入字体图标(JS):
+      <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-dulitixi-copy-copy-copy-copy-copy"></use>
       </svg>
     </div>

vue-app1/webpack.config.js

@@ -4,7 +4,7 @@
  * @Author: Jason chen
  * @Date: 2021-08-18 14:09:16
  * @LastEditors: Jason chen
- * @LastEditTime: 2021-09-06 15:52:48
+ * @LastEditTime: 2021-09-07 10:49:38
  */
 const { resolve } = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -122,7 +122,6 @@ const result = {
         './untils': './src/untils/count.js',
         './appOneChildren': './src/App.vue',
         './appOneIconfont': './src/assets/iconfont/iconfont.js',
-        './appOneIconfontCss': './src/assets/iconfont/iconfont.css'
       },
     })
   ],

vue-app3/package.json

@@ -15,10 +15,12 @@
     "copy-webpack-plugin": "^9.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.2.0",
+    "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^5.3.2",
     "less": "^4.1.1",
     "less-loader": "^10.0.1",
+    "mini-css-extract-plugin": "^2.2.2",
     "progress-bar-webpack-plugin": "^2.1.0",
     "style-loader": "^3.2.1",
     "url-loader": "^4.1.1",

vue-app3/public/mfpApps/app1/deploy/app1.js

@@ -17,7 +17,7 @@ var vueAppOne;
   \***********************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("var moduleMap = {\n\t\"./applang\": () => {\n\t\treturn Promise.all([__webpack_require__.e(\"vendors-node_modules_vue-i18n_dist_vue-i18n_esm_js-node_modules_vue_dist_vue_runtime_esm_js\"), __webpack_require__.e(\"src_language_index_js\")]).then(() => (() => ((__webpack_require__(/*! ./src/language/index.js */ \"./src/language/index.js\")))));\n\t},\n\t\"./cloneDeep\": () => {\n\t\treturn Promise.all([__webpack_require__.e(\"vendors-node_modules_lodash_lodash_js\"), __webpack_require__.e(\"src_untils_cloneDeep_js\")]).then(() => (() => ((__webpack_require__(/*! ./src/untils/cloneDeep.js */ \"./src/untils/cloneDeep.js\")))));\n\t},\n\t\"./untils\": () => {\n\t\treturn __webpack_require__.e(\"src_untils_count_js\").then(() => (() => ((__webpack_require__(/*! ./src/untils/count.js */ \"./src/untils/count.js\")))));\n\t},\n\t\"./appOneChildren\": () => {\n\t\treturn __webpack_require__.e(\"src_App_vue\").then(() => (() => ((__webpack_require__(/*! ./src/App.vue */ \"./src/App.vue\")))));\n\t}\n};\nvar get = (module, getScope) => {\n\t__webpack_require__.R = getScope;\n\tgetScope = (\n\t\t__webpack_require__.o(moduleMap, module)\n\t\t\t? moduleMap[module]()\n\t\t\t: Promise.resolve().then(() => {\n\t\t\t\tthrow new Error('Module \"' + module + '\" does not exist in container.');\n\t\t\t})\n\t);\n\t__webpack_require__.R = undefined;\n\treturn getScope;\n};\nvar init = (shareScope, initScope) => {\n\tif (!__webpack_require__.S) return;\n\tvar oldScope = __webpack_require__.S[\"default\"];\n\tvar name = \"default\"\n\tif(oldScope && oldScope !== shareScope) throw new Error(\"Container initialization failed as it has already been initialized with a different share scope\");\n\t__webpack_require__.S[name] = shareScope;\n\treturn __webpack_require__.I(name, initScope);\n};\n\n// This exports getters to disallow modifications\n__webpack_require__.d(exports, {\n\tget: () => (get),\n\tinit: () => (init)\n});\n\n//# sourceURL=webpack://vue-app1/container_entry?");
+eval("var moduleMap = {\n\t\"./applang\": () => {\n\t\treturn Promise.all([__webpack_require__.e(\"vendors-node_modules_vue-i18n_dist_vue-i18n_esm_js-node_modules_vue_dist_vue_runtime_esm_js\"), __webpack_require__.e(\"src_language_index_js\")]).then(() => (() => ((__webpack_require__(/*! ./src/language/index.js */ \"./src/language/index.js\")))));\n\t},\n\t\"./cloneDeep\": () => {\n\t\treturn Promise.all([__webpack_require__.e(\"vendors-node_modules_lodash_lodash_js\"), __webpack_require__.e(\"src_untils_cloneDeep_js\")]).then(() => (() => ((__webpack_require__(/*! ./src/untils/cloneDeep.js */ \"./src/untils/cloneDeep.js\")))));\n\t},\n\t\"./untils\": () => {\n\t\treturn __webpack_require__.e(\"src_untils_count_js\").then(() => (() => ((__webpack_require__(/*! ./src/untils/count.js */ \"./src/untils/count.js\")))));\n\t},\n\t\"./appOneChildren\": () => {\n\t\treturn __webpack_require__.e(\"src_App_vue\").then(() => (() => ((__webpack_require__(/*! ./src/App.vue */ \"./src/App.vue\")))));\n\t},\n\t\"./appOneIconfont\": () => {\n\t\treturn __webpack_require__.e(\"src_assets_iconfont_iconfont_js\").then(() => (() => ((__webpack_require__(/*! ./src/assets/iconfont/iconfont.js */ \"./src/assets/iconfont/iconfont.js\")))));\n\t},\n\t\"./appOneIconfontCss\": () => {\n\t\treturn __webpack_require__.e(\"src_assets_iconfont_iconfont_css\").then(() => (() => ((__webpack_require__(/*! ./src/assets/iconfont/iconfont.css */ \"./src/assets/iconfont/iconfont.css\")))));\n\t}\n};\nvar get = (module, getScope) => {\n\t__webpack_require__.R = getScope;\n\tgetScope = (\n\t\t__webpack_require__.o(moduleMap, module)\n\t\t\t? moduleMap[module]()\n\t\t\t: Promise.resolve().then(() => {\n\t\t\t\tthrow new Error('Module \"' + module + '\" does not exist in container.');\n\t\t\t})\n\t);\n\t__webpack_require__.R = undefined;\n\treturn getScope;\n};\nvar init = (shareScope, initScope) => {\n\tif (!__webpack_require__.S) return;\n\tvar oldScope = __webpack_require__.S[\"default\"];\n\tvar name = \"default\"\n\tif(oldScope && oldScope !== shareScope) throw new Error(\"Container initialization failed as it has already been initialized with a different share scope\");\n\t__webpack_require__.S[name] = shareScope;\n\treturn __webpack_require__.I(name, initScope);\n};\n\n// This exports getters to disallow modifications\n__webpack_require__.d(exports, {\n\tget: () => (get),\n\tinit: () => (init)\n});\n\n//# sourceURL=webpack://vue-app1/container_entry?");
 
 /***/ })
 
@@ -100,6 +100,15 @@ eval("var moduleMap = {\n\t\"./applang\": () => {\n\t\treturn Promise.all([__web
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/get mini-css chunk filename */
+/******/ 	(() => {
+/******/ 		// This function allow to reference all chunks
+/******/ 		__webpack_require__.miniCssF = (chunkId) => {
+/******/ 			// return url for filenames based on template
+/******/ 			return "css/" + chunkId + ".common.css";
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/global */
 /******/ 	(() => {
 /******/ 		__webpack_require__.g = (function() {
@@ -203,6 +212,78 @@ eval("var moduleMap = {\n\t\"./applang\": () => {\n\t\treturn Promise.all([__web
 /******/ 		__webpack_require__.p = scriptUrl;
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/css loading */
+/******/ 	(() => {
+/******/ 		var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ 			var linkTag = document.createElement("link");
+/******/ 		
+/******/ 			linkTag.rel = "stylesheet";
+/******/ 			linkTag.type = "text/css";
+/******/ 			var onLinkComplete = (event) => {
+/******/ 				// avoid mem leaks.
+/******/ 				linkTag.onerror = linkTag.onload = null;
+/******/ 				if (event.type === 'load') {
+/******/ 					resolve();
+/******/ 				} else {
+/******/ 					var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ 					var realHref = event && event.target && event.target.href || fullhref;
+/******/ 					var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ 					err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ 					err.type = errorType;
+/******/ 					err.request = realHref;
+/******/ 					linkTag.parentNode.removeChild(linkTag)
+/******/ 					reject(err);
+/******/ 				}
+/******/ 			}
+/******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ 			linkTag.href = fullhref;
+/******/ 		
+/******/ 			document.head.appendChild(linkTag);
+/******/ 			return linkTag;
+/******/ 		};
+/******/ 		var findStylesheet = (href, fullhref) => {
+/******/ 			var existingLinkTags = document.getElementsByTagName("link");
+/******/ 			for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ 				var tag = existingLinkTags[i];
+/******/ 				var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ 				if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ 			}
+/******/ 			var existingStyleTags = document.getElementsByTagName("style");
+/******/ 			for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ 				var tag = existingStyleTags[i];
+/******/ 				var dataHref = tag.getAttribute("data-href");
+/******/ 				if(dataHref === href || dataHref === fullhref) return tag;
+/******/ 			}
+/******/ 		};
+/******/ 		var loadStylesheet = (chunkId) => {
+/******/ 			return new Promise((resolve, reject) => {
+/******/ 				var href = __webpack_require__.miniCssF(chunkId);
+/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				if(findStylesheet(href, fullhref)) return resolve();
+/******/ 				createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ 			});
+/******/ 		}
+/******/ 		// object to store loaded CSS chunks
+/******/ 		var installedCssChunks = {
+/******/ 			"vueAppOne": 0
+/******/ 		};
+/******/ 		
+/******/ 		__webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ 			var cssChunks = {"src_App_vue":1,"src_assets_iconfont_iconfont_css":1};
+/******/ 			if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ 			else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ 				promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ 					installedCssChunks[chunkId] = 0;
+/******/ 				}, (e) => {
+/******/ 					delete installedCssChunks[chunkId];
+/******/ 					throw e;
+/******/ 				}));
+/******/ 			}
+/******/ 		};
+/******/ 		
+/******/ 		// no hmr
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/jsonp chunk loading */
 /******/ 	(() => {
 /******/ 		// no baseURI

vue-app3/public/mfpApps/app1/deploy/assets/images/ModuleFederationPlugin.jpg

@@ -0,0 +1,153 @@
+/*!************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./src/assets/iconfont/iconfont.css ***!
+  \************************************************************************************/
+@font-face {
+  font-family: "iconfont"; /* Project id 1870567 */
+  src: url(..//font/iconfont.e8afb1d.woff2) format('woff2'),
+       url(..//font/iconfont.e697176.woff) format('woff'),
+       url(..//font/iconfont.08b00db.ttf) format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-duihua:before {
+  content: "\e6ba";
+}
+
+.icon-diannao:before {
+  content: "\e6bb";
+}
+
+.icon-shouye:before {
+  content: "\e6bc";
+}
+
+.icon-lingdao:before {
+  content: "\e6bd";
+}
+
+.icon-xiezi:before {
+  content: "\e6be";
+}
+
+.icon-zuhe:before {
+  content: "\e647";
+}
+
+.icon-fileplus-fill:before {
+  content: "\e7c6";
+}
+
+.icon-expandalt-fill:before {
+  content: "\e7e4";
+}
+
+.icon-eye-slash:before {
+  content: "\e7ec";
+}
+
+.icon-eye:before {
+  content: "\e7ed";
+}
+
+.icon-reply:before {
+  content: "\e82f";
+}
+
+.icon-share:before {
+  content: "\e86e";
+}
+
+.icon-Directory-tree:before {
+  content: "\e892";
+}
+
+.icon-workflow-copy:before {
+  content: "\f078";
+}
+
+.icon-servicemeshfuwuwangge-copy:before {
+  content: "\f076";
+}
+
+.icon-servicemeshfu-copy-copy:before {
+  content: "\f077";
+}
+
+.icon-dituleiwanggequ-copy:before {
+  content: "\f072";
+}
+
+.icon-fangxingweixuanzhong-copy:before {
+  content: "\f073";
+}
+
+.icon-daqilitiguancex:before {
+  content: "\e661";
+}
+
+.icon-VE:before {
+  content: "\e666";
+}
+
+.icon-customer-info:before {
+  content: "\e667";
+}
+
+.icon-product:before {
+  content: "\e66c";
+}
+
+.icon-distribution:before {
+  content: "\e671";
+}
+
+.icon-litijiankong-copy:before {
+  content: "\f074";
+}
+
+.icon-dulitixi-copy-copy-copy-copy-copy:before {
+  content: "\f075";
+}
+
+.icon-litipouqie:before {
+  content: "\e603";
+}
+
+.icon-rongqi:before {
+  content: "\e625";
+}
+
+.icon-lifangtilitiduomiantifangkuai:before {
+  content: "\e600";
+}
+
+.icon--SearchDatabaseFlat:before {
+  content: "\f071";
+}
+
+
+/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/children.vue?vue&type=style&index=0&lang=less& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************/
+.app1-children {
+  border: 1px solid red;
+  background: red;
+  color: #ffff;
+}
+
+/*!********************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& ***!
+  \********************************************************************************************************************************************************************************************************************/
+
+.vue-app1 {
+  border: black solid 1px;
+  padding: 10px;
+}
+

vue-app3/public/mfpApps/app1/deploy/assets/images/webpackimage.png

@@ -0,0 +1,18 @@
+/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/children.vue?vue&type=style&index=0&lang=less& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************/
+.app1-children {
+  border: 1px solid red;
+  background: red;
+  color: #ffff;
+}
+
+/*!********************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& ***!
+  \********************************************************************************************************************************************************************************************************************/
+
+.vue-app1 {
+  border: black solid 1px;
+  padding: 10px;
+}
+