chore: 前端webpack和漏洞组件升级 (#7424)

* chore: webpack升级 (#7404) * merge branch # Reviewed, transaction id: 4962 * chore: 更新webpack配置 #ignore # Reviewed, transaction id: 5162 * chore: 更新部分前端依赖 --ignore (#7409) * chore: 更新部分前端依赖 --ignore # Reviewed, transaction id: 5322 * chore: 获取画布尺寸方法添加空值判断 --ignore # Reviewed, transaction id: 5365 --------- Co-authored-by: yiwenZhou <[email protected]>
TencentBlueKing · Apr 22, 2024 · 2c50013 · 2c50013
1 parent bc8bb65
commit 2c50013
Show file tree

Hide file tree

Showing 19 changed files with 14,466 additions and 130 deletions.
diff --git a/frontend/desktop/builds/webpack.base.js b/frontend/desktop/builds/webpack.base.js
@@ -26,16 +26,10 @@ module.exports = {
         rules: [
             {
                 test: require.resolve('jquery'),
-                use: [
-                    {
-                        loader: 'expose-loader',
-                        options: 'jQuery'
-                    },
-                    {
-                        loader: 'expose-loader',
-                        options: '$'
-                    }
-                ]
+                loader: 'expose-loader',
+                options: {
+                    exposes: ['$', 'jQuery']
+                }
             },
             {
                 enforce: 'pre',
@@ -70,30 +64,27 @@ module.exports = {
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-                loader: 'url-loader',
-                options: {
-                    limit: 10000,
-                    name: path.posix.join('images/[name].[contenthash:10].[ext]')
+                type: 'asset/resource',
+                generator: {
+                    filename: path.posix.join('images/[name].[contenthash:10].[ext]')
                 }
             },
             {
                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-                loader: 'url-loader',
-                options: {
-                    limit: 10000,
-                    name: path.posix.join('videos/[name].[contenthash:10].[ext]')
+                type: 'asset/resource',
+                generator: {
+                    filename: path.posix.join('videos/[name].[contenthash:10].[ext]')
                 }
             },
             {
                 test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
-                loader: 'url-loader',
+                type: 'asset/resource',
                 exclude: [
                     path.join(__dirname, '../src/assets/images/'),
                     path.join(__dirname, '../src/assets/bk-magic/images/')
                 ],
-                options: {
-                    limit: 10000,
-                    name: path.posix.join('fonts/[name].[contenthash:10].[ext]')
+                generator: {
+                    filename: path.posix.join('fonts/[name].[contenthash:10].[ext]')
                 }
             }
         ]
@@ -112,9 +103,10 @@ module.exports = {
         })
     ],
     optimization: {
+        moduleIds: 'named',
         splitChunks: {
             cacheGroups: {
-                vendors: { // 框架相关
+                defaultVendors: { // 框架相关
                     test: /(vue|vue-router|vuex|axios|vee-validate|axios|vuedraggable)/,
                     name: 'vendors',
                     chunks: 'initial',
@@ -159,9 +151,11 @@ module.exports = {
             '@': path.resolve(__dirname, '../src/'),
             'vue': 'vue/dist/vue.esm.js'
         },
-        extensions: ['*', '.js', '.vue', '.json']
+        extensions: ['*', '.js', '.vue', '.json'],
+        fallback: {
+            path: false,
+            buffer: false
+        }
     },
-    node: {
-        fs: 'empty'
-    }
+    node: false
 }
diff --git a/frontend/desktop/builds/webpack.dev.config.js b/frontend/desktop/builds/webpack.dev.config.js
@@ -10,54 +10,46 @@
 * specific language governing permissions and limitations under the License.
 */
 const webpack = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpackBaseConfig = require('./webpack.base.js')
 const mocker = require('./mock/index.js')
 const SITE_URL = '/'
 const proxyPath = [
-    'static/*',
-    'jsi18n/*',
-    'api/*',
-    'core/api/*',
-    'config/api/*',
-    'apigw/*',
-    'common_template/api/*',
-    'template/api/*',
-    'taskflow/api/*',
+    'static',
+    'jsi18n',
+    'api',
+    'core/api',
+    'core/footer',
+    'config/api',
+    'apigw',
+    'common_template/api',
+    'template/api',
+    'taskflow/api',
     'appmaker/save/',
     'appmaker/get_appmaker_count/',
-    'pipeline/*',
-    'analysis/*',
-    'periodictask/api/*',
+    'pipeline',
+    'analysis',
+    'periodictask/api',
     'admin/search/',
-    'admin/api/*',
-    'admin/taskflow/*',
-    'admin/template/*',
-    'develop/api/*',
-    'version_log/*',
-    'iam/*',
-    'plugin_service/*',
-    'mako_operations/*',
-    'collection/*'
+    'admin/api',
+    'admin/taskflow',
+    'admin/template',
+    'develop/api',
+    'version_log',
+    'iam',
+    'plugin_service',
+    'mako_operations',
+    'collection'
 ]
-const proxyRule = {}
-proxyPath.forEach((item) => {
-    proxyRule[SITE_URL + item] = {
-        target: 'http://dev.{BK_PAAS_HOST}:8000',
-        secure: false,
-        changeOrigin: true,
-        headers: {
-            referer: 'http://dev.{BK_PAAS_HOST}:8000'
-        }
-    }
-})
+
+const context = proxyPath.map(item => SITE_URL + item)
 
 module.exports = merge(webpackBaseConfig, {
     mode: 'development',
     output: {
         publicPath: '/',
-        filename: 'js/[name].[hash:10].js'
+        filename: 'js/[name].[contenthash:10].js'
     },
     module: {
         rules: [
@@ -79,7 +71,6 @@ module.exports = merge(webpackBaseConfig, {
                 NODE_ENV: '"development"'
             }
         }),
-        new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
         new HtmlWebpackPlugin({
             template: './src/assets/html/index-dev.html',
@@ -89,28 +80,30 @@ module.exports = merge(webpackBaseConfig, {
     performance: {
         hints: false
     },
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'inline-cheap-module-source-map',
     devServer: {
         port: 9000,
-        public: 'dev.{BK_PAAS_HOST}',
-        hot: true,
-        https: false,
+        host: 'dev.{BK_PAAS_HOST}',
+        server: 'https',
         historyApiFallback: {
             rewrites: [
                 { from: /^.*$/, to: '/index.html' }
             ]
         },
-        proxy: proxyRule,
-        overlay: true,
-        stats: {
-            children: false,
-            chunks: false,
-            entrypoints: false,
-            modules: false
-        },
-        // 数据 mock
-        before (app) {
-            mocker(app)
+        proxy: [
+            {
+                context,
+                target: 'https://{BK_PAAS_HOST}:8000',
+                secure: false,
+                changeOrigin: true,
+                headers: {
+                    referer: 'https://{BK_PAAS_HOST}:8000'
+                }
+            }
+        ],
+        client: {
+            overlay: true,
+            progress: true
         }
     }
 })
diff --git a/frontend/desktop/builds/webpack.prod.config.js b/frontend/desktop/builds/webpack.prod.config.js
@@ -11,7 +11,7 @@
 */
 const path = require('path')
 const webpack = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
@@ -65,9 +65,7 @@ module.exports = merge(webpackBaseConfig, {
     optimization: {
         minimizer: [
             new TerserPlugin({
-                cache: true,
                 parallel: true,
-                sourceMap: false,
                 extractComments: false
             })
         ]
@@ -87,5 +85,5 @@ module.exports = merge(webpackBaseConfig, {
         // maxEntrypointSize: 500000,
         // hints: "error"
     },
-    devtool: false
+    devtool: 'source-map'
 })