修改程序的打包，去掉JsUtil，因为他是不安全的，违反CSP安全策略。

package.json

@@ -1,12 +1,12 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.34",
+  "version": "1.0.37",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {
-    "dev": "webpack serve --open --hot --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js",
-    "lib": "webpack --progress --config webpack.lib.js"
+    "dev": "cross-env webpack serve --open --hot --config webpack.dev.js",
+    "build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.prod.js --progress",
+    "lib": "cross-env NODE_ENV=production webpack --progress --config webpack.lib.js"
   },
   "directories": {
     "dist": "dist"
@@ -22,6 +22,7 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "babel-loader": "^8.2.3",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.7.0",
     "eslint": "^8.10.0",
     "eslint-plugin-vue": "^8.5.0",
@@ -30,6 +31,7 @@
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
     "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
     "vue-loader": "^17.0.0",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",

packages/common/JsUtil.js

@@ -1,28 +0,0 @@
-/**
- * 动态加载js模块
- * @param {*} jsUrl js文件的路径
- * @return promise对象
- */
-let dynamicLoadJsModule = function(jsUrl){
-  let promise = null;
-    
-  // 注意：在webpack中直接使用import(url).then()会错误的解析url。
-  // 如果url是静态的值，举例'xxx.js', webpack打包的时候，会去src对应的目录下面找js文件。
-  // 如果url是变量，举例const url = '', webpack打包的时候，原理不清晰...，测试结果时浏览器不会发出http请求加载后端的js文件。
-  let command = `
-        promise = new Promise((resolve, reject) => {
-            import('${jsUrl}').then(remoteComponent => {
-                resolve(remoteComponent);
-            }).catch(error => {
-                reject(error);
-            });
-        });
-    `;
-  eval(command);
-  return promise;
-};
-
-
-export default {
-  dynamicLoadJsModule,
-};

packages/info/src/InfoWindow.vue

@@ -180,7 +180,16 @@ export default defineComponent({
 
       const jsUrl = _self.infoWindowDto.jsUrl;
       if(jsUrl != null && jsUrl != undefined){
-        let promise = JsUtil.dynamicLoadJsModule(jsUrl);
+
+        let promise = new Promise((resolve, reject) => {
+          import(/* webpackIgnore: true */ jsUrl).then(remoteComponent => {
+            resolve(remoteComponent);
+          }).catch(error => {
+            reject(error);
+          });
+        });
+
+
         promise.then(remoteComponent => {
           console.log('remoteComponent：' + remoteComponent.default.name);
           if(componentName !== remoteComponent.default.name){

webpack.base.js

@@ -1,6 +1,7 @@
-var path = require('path')
-var webpack = require('webpack')
-const { VueLoaderPlugin } = require('vue-loader')
+var path = require('path');
+var webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
@@ -22,30 +23,48 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ],
+        use: (process.env.NODE_ENV === 'production') ? [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: './',
+            },
+          },
+          'css-loader'] : ['style-loader', 'css-loader'],
       },
+      
       {
+        // webpack5 通过资源模块来处理图片
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10240,
+          },
+        },
+        generator: {
+          filename: '[name].[contenthash][ext][query]',
+        },
+      },
+      {
+        test: /\.(eot|woff|woff2|ttf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[name].[contenthash][ext]?[hash]',
+        },
+      },
+    ],
   },
 
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'packages'),
     },
-    extensions: ['*', '.js', '.vue', '.json']
+    extensions: ['*', '.js', '.vue', '.json'],
   },
 
   performance: {
-    hints: false
+    hints: false,
   },
   
   // 不把第三方库打包到bundle中
@@ -54,7 +73,7 @@ module.exports = {
     jquery: 'window.$',
     $: 'window.$',
     bootstrap: 'bootstrap',
-    moment: 'moment'
+    moment: 'moment',
   },
   
   plugins: [
@@ -65,5 +84,5 @@ module.exports = {
       // 自从eslint推出--fix命令后，如果觉得eslint格式化规则已经够用的话，其实也可以不用prettier了。
       fix: true,
     }),
-  ]
-}
+  ],
+};

webpack.lib.js

@@ -2,6 +2,7 @@ var path = require('path');
 var webpack = require('webpack');
 const WebpackMerge = require('webpack-merge');
 const baseConfig = require('./webpack.base.js');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = WebpackMerge.merge(baseConfig,{
   mode: 'production',
@@ -27,9 +28,9 @@ module.exports = WebpackMerge.merge(baseConfig,{
   },
 
   
-  optimization: {
-    minimize: true,    // 压缩 bundle
-  },
+  //optimization: {
+  //  minimize: true,    // 压缩 bundle
+  //},
   
   //devtool: 'source-map',
 
@@ -37,6 +38,12 @@ module.exports = WebpackMerge.merge(baseConfig,{
     new webpack.LoaderOptionsPlugin({
       minimize: true,
     }),
+    
+    // CSS 提取
+    new MiniCssExtractPlugin({
+      filename: 'pc-component-v3.css',
+    }),
+
   ]),
 
   // 不把第三方库打包到bundle中