diff --git a/km-console/packages/config-manager-fe/config/d1-webpack.base.js b/km-console/packages/config-manager-fe/config/d1-webpack.base.js deleted file mode 100644 index 95f0bc70bdef03eb071fcf67c17457b5749285af..0000000000000000000000000000000000000000 --- a/km-console/packages/config-manager-fe/config/d1-webpack.base.js +++ /dev/null @@ -1,205 +0,0 @@ -/* eslint-disable */ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const ProgressBarPlugin = require('progress-bar-webpack-plugin'); -const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const StatsPlugin = require('stats-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const TerserJSPlugin = require('terser-webpack-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const HappyPack = require('happypack'); -const os = require('os'); -const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); -const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); -const theme = require('./theme'); -var cwd = process.cwd(); - -const path = require('path'); -const isProd = process.env.NODE_ENV === 'production'; -const babelOptions = { - cacheDirectory: true, - babelrc: false, - presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')], - plugins: [ - [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], - [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], - [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], - require.resolve('@babel/plugin-proposal-export-default-from'), - require.resolve('@babel/plugin-proposal-export-namespace-from'), - require.resolve('@babel/plugin-proposal-object-rest-spread'), - require.resolve('@babel/plugin-transform-runtime'), - require.resolve('@babel/plugin-proposal-optional-chaining'), // - require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), // 解决 ?? 无法转义问题 - require.resolve('@babel/plugin-proposal-numeric-separator'), // 转义 1_000_000 - !isProd && require.resolve('react-refresh/babel'), - ] - .filter(Boolean) - .concat([ - [ - 'babel-plugin-import', - { - libraryName: 'antd', - style: true, - }, - ], - '@babel/plugin-transform-object-assign', - ]), -}; -module.exports = () => { - const manifestName = `manifest.json`; - const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css'; - - const plugins = [ - new ProgressBarPlugin(), - new CaseSensitivePathsPlugin(), - new MiniCssExtractPlugin({ - filename: cssFileName, - }), - new StatsPlugin(manifestName, { - chunkModules: false, - source: true, - chunks: false, - modules: false, - assets: true, - children: false, - exclude: [/node_modules/], - }), - new HappyPack({ - id: 'babel', - loaders: [ - 'cache-loader', - { - loader: 'babel-loader', - options: babelOptions, - }, - ], - threadPool: happyThreadPool, - }), - !isProd && - new ReactRefreshWebpackPlugin({ - overlay: false, - }), - // new BundleAnalyzerPlugin({ - // analyzerPort: 8889 - // }), - ].filter(Boolean); - if (isProd) { - plugins.push(new CleanWebpackPlugin()); - } - return { - externals: isProd - ? [ - /^react$/, - /^react\/lib.*/, - /^react-dom$/, - /.*react-dom.*/, - /^single-spa$/, - /^single-spa-react$/, - /^moment$/, - /^antd$/, - /^lodash$/, - /^react-router$/, - /^react-router-dom$/, - ] - : [], - resolve: { - symlinks: false, - extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'], - alias: { - // '@pkgs': path.resolve(cwd, 'src/packages'), - '@pkgs': path.resolve(cwd, './node_modules/@didi/d1-packages'), - '@cpts': path.resolve(cwd, 'src/components'), - '@interface': path.resolve(cwd, 'src/interface'), - '@apis': path.resolve(cwd, 'src/api'), - react: path.resolve('./node_modules/react'), - actions: path.resolve(cwd, 'src/actions'), - lib: path.resolve(cwd, 'src/lib'), - constants: path.resolve(cwd, 'src/constants'), - components: path.resolve(cwd, 'src/components'), - container: path.resolve(cwd, 'src/container'), - api: path.resolve(cwd, 'src/api'), - assets: path.resolve(cwd, 'src/assets'), - mobxStore: path.resolve(cwd, 'src/mobxStore'), - }, - }, - plugins, - module: { - rules: [ - { - parser: { system: false }, - }, - { - test: /\.(js|jsx|ts|tsx)$/, - exclude: /node_modules\/(?!react-intl|@didi\/dcloud-design)/, - use: [ - { - loader: 'happypack/loader?id=babel', - }, - ], - }, - { - test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/, - use: [ - { - loader: 'file-loader', - options: { - name: '[name].[ext]', - outputPath: './assets/image/', - esModule: false, - }, - }, - ], - }, - { - test: /\.(css|less)$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - }, - 'css-loader', - { - loader: 'less-loader', - options: { - javascriptEnabled: true, - modifyVars: theme, - }, - }, - ], - }, - ], - }, - optimization: Object.assign( - { - splitChunks: { - cacheGroups: { - vendor: { - test: /[\\/]node_modules[\\/]/, - chunks: 'all', - name: 'vendor', - priority: 10, - enforce: true, - minChunks: 1, - maxSize: 3500000, - }, - }, - }, - }, - isProd - ? { - minimizer: [ - new TerserJSPlugin({ - cache: true, - sourceMap: true, - }), - new OptimizeCSSAssetsPlugin({}), - ], - } - : {} - ), - devtool: isProd ? 'cheap-module-source-map' : 'source-map', - node: { - fs: 'empty', - net: 'empty', - tls: 'empty', - }, - }; -}; diff --git a/km-console/packages/config-manager-fe/config/webpack.common.js b/km-console/packages/config-manager-fe/config/webpack.common.js new file mode 100644 index 0000000000000000000000000000000000000000..cef88e615240a0b662d4d935b20f8230103b8db7 --- /dev/null +++ b/km-console/packages/config-manager-fe/config/webpack.common.js @@ -0,0 +1,132 @@ +const path = require('path'); +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ProgressBarPlugin = require('progress-bar-webpack-plugin'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const StatsPlugin = require('stats-webpack-plugin'); +const HappyPack = require('happypack'); +const os = require('os'); +const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); +const theme = require('./theme'); +const pkgJson = require('../package'); + +const devMode = process.env.NODE_ENV === 'development'; +const babelOptions = { + cacheDirectory: true, + babelrc: false, + presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')], + plugins: [ + [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], + [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }], + require.resolve('@babel/plugin-proposal-export-default-from'), + require.resolve('@babel/plugin-proposal-export-namespace-from'), + require.resolve('@babel/plugin-proposal-object-rest-spread'), + require.resolve('@babel/plugin-transform-runtime'), + require.resolve('@babel/plugin-proposal-optional-chaining'), // + require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), // 解决 ?? 无法转义问题 + require.resolve('@babel/plugin-proposal-numeric-separator'), // 转义 1_000_000 + devMode && require.resolve('react-refresh/babel'), + ].filter(Boolean), +}; + +module.exports = { + entry: { + [pkgJson.ident]: ['./src/index.tsx'], + }, + resolve: { + symlinks: false, + extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'], + alias: { + '@src': path.resolve(process.cwd(), 'src'), + }, + }, + plugins: [ + new ProgressBarPlugin(), + new CaseSensitivePathsPlugin(), + new StatsPlugin('manifest.json', { + chunkModules: false, + source: true, + chunks: false, + modules: false, + assets: true, + children: false, + exclude: [/node_modules/], + }), + new HappyPack({ + id: 'babel', + loaders: [ + 'cache-loader', + { + loader: 'babel-loader', + options: babelOptions, + }, + ], + threadPool: happyThreadPool, + }), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + RUN_ENV: JSON.stringify(process.env.RUN_ENV), + }, + }), + new HtmlWebpackPlugin({ + meta: { + manifest: 'manifest.json', + }, + template: './src/index.html', + inject: 'body', + }), + ].filter(Boolean), + module: { + rules: [ + { + parser: { system: false }, + }, + { + test: /\.(js|jsx|ts|tsx)$/, + exclude: /node_modules\/(?!react-intl|@didi\/dcloud-design)/, + use: [ + { + loader: 'happypack/loader?id=babel', + }, + ], + }, + { + test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf)$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: './assets/image/', + esModule: false, + }, + }, + ], + }, + { + test: /\.(css|less)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'less-loader', + options: { + javascriptEnabled: true, + modifyVars: theme, + }, + }, + ], + }, + ], + }, + node: { + fs: 'empty', + net: 'empty', + tls: 'empty', + }, + stats: 'errors-warnings', +}; diff --git a/km-console/packages/config-manager-fe/config/webpack.dev.js b/km-console/packages/config-manager-fe/config/webpack.dev.js new file mode 100644 index 0000000000000000000000000000000000000000..1b60f7032079ed8695427eb25e90740bd80ac429 --- /dev/null +++ b/km-console/packages/config-manager-fe/config/webpack.dev.js @@ -0,0 +1,35 @@ +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); +const pkgJson = require('../package'); + +module.exports = { + mode: 'development', + plugins: [ + new MiniCssExtractPlugin(), + new ReactRefreshWebpackPlugin({ + overlay: false, + }), + ], + devServer: { + host: '127.0.0.1', + port: pkgJson.port, + hot: true, + open: false, + publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`, + inline: true, + disableHostCheck: true, + historyApiFallback: true, + headers: { + 'Access-Control-Allow-Origin': '*', + }, + }, + output: { + path: '/', + publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`, + library: pkgJson.ident, + libraryTarget: 'amd', + filename: '[name].js', + chunkFilename: '[name].js', + }, + devtool: 'cheap-module-eval-source-map', +}; diff --git a/km-console/packages/config-manager-fe/config/webpack.prod.js b/km-console/packages/config-manager-fe/config/webpack.prod.js new file mode 100644 index 0000000000000000000000000000000000000000..9dd9ee664e376565c376acea124a5f2dca941ce8 --- /dev/null +++ b/km-console/packages/config-manager-fe/config/webpack.prod.js @@ -0,0 +1,59 @@ +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const TerserJSPlugin = require('terser-webpack-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const pkgJson = require('../package'); + +module.exports = { + mode: 'production', + externals: [ + /^react$/, + /^react\/lib.*/, + /^react-dom$/, + /.*react-dom.*/, + /^single-spa$/, + /^single-spa-react$/, + /^moment$/, + /^lodash$/, + /^react-router$/, + /^react-router-dom$/, + ], + plugins: [ + new CleanWebpackPlugin(), + new MiniCssExtractPlugin({ + filename: '[name]-[chunkhash].css', + }), + ], + output: { + path: path.resolve(process.cwd(), `../../../km-rest/src/main/resources/templates/${pkgJson.ident}`), + publicPath: `${process.env.PUBLIC_PATH}/${pkgJson.ident}/`, + library: pkgJson.ident, + libraryTarget: 'amd', + filename: '[name]-[chunkhash].js', + chunkFilename: '[name]-[chunkhash].js', + }, + optimization: { + splitChunks: { + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/]/, + chunks: 'all', + name: 'vendor', + priority: 10, + enforce: true, + minChunks: 1, + maxSize: 3500000, + }, + }, + }, + minimizer: [ + new TerserJSPlugin({ + cache: true, + sourceMap: true, + }), + new OptimizeCSSAssetsPlugin({}), + ], + }, + devtool: 'none', +}; diff --git a/km-console/packages/config-manager-fe/webpack.config.js b/km-console/packages/config-manager-fe/webpack.config.js index f7d6ad13a3879b05f75b4f5dea7b5219887d6e07..972f46a4607c9f7dc2a5a2353f96f4b5d7000077 100644 --- a/km-console/packages/config-manager-fe/webpack.config.js +++ b/km-console/packages/config-manager-fe/webpack.config.js @@ -1,56 +1,9 @@ -/* eslint-disable */ const path = require('path'); require('dotenv').config({ path: path.resolve(process.cwd(), '../../.env') }); -const isProd = process.env.NODE_ENV === 'production'; -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); const merge = require('webpack-merge'); -const pkgJson = require('./package'); -const getWebpackCommonConfig = require('./config/d1-webpack.base'); -const outPath = path.resolve(__dirname, `../../../km-rest/src/main/resources/templates/${pkgJson.ident}`); -const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js'; +const devMode = process.env.NODE_ENV === 'development'; +const commonConfig = require('./config/webpack.common'); +const devConfig = require('./config/webpack.dev'); +const prodConfig = require('./config/webpack.prod'); -module.exports = merge(getWebpackCommonConfig(), { - mode: isProd ? 'production' : 'development', - entry: { - [pkgJson.ident]: ['./src/index.tsx'], - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - RUN_ENV: JSON.stringify(process.env.RUN_ENV), - }, - }), - new HtmlWebpackPlugin({ - meta: { - manifest: 'manifest.json', - }, - template: './src/index.html', - inject: 'body', - }), - ], - output: { - path: outPath, - publicPath: isProd ? `${process.env.PUBLIC_PATH}/${pkgJson.ident}/` : `http://localhost:${pkgJson.port}/${pkgJson.ident}/`, - library: pkgJson.ident, - libraryTarget: 'amd', - filename: jsFileName, - chunkFilename: jsFileName, - }, - devtool: isProd ? 'none' : 'cheap-module-eval-source-map', - devServer: { - host: '127.0.0.1', - port: pkgJson.port, - hot: true, - open: false, - publicPath: `http://localhost:${pkgJson.port}/${pkgJson.ident}/`, - inline: true, - disableHostCheck: true, - historyApiFallback: true, - headers: { - 'Access-Control-Allow-Origin': '*', - }, - proxy: {}, - }, -}); +module.exports = merge(commonConfig, devMode ? devConfig : prodConfig); diff --git a/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js b/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js deleted file mode 100644 index 9e21c70d7e9c659641f6f9146f8712c484144d80..0000000000000000000000000000000000000000 --- a/km-console/packages/layout-clusters-fe/config/d1-webpack.base.js +++ /dev/null @@ -1,183 +0,0 @@ -/* eslint-disable */ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const ProgressBarPlugin = require('progress-bar-webpack-plugin'); -const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js'); -var webpackConfigResolveAlias = require('./webpackConfigResolveAlias'); -const TerserJSPlugin = require('terser-webpack-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); -const theme = require('./theme'); -const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); - -const isProd = process.env.NODE_ENV === 'production'; -const babelOptions = { - cacheDirectory: true, - babelrc: false, - presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')], - plugins: [ - [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], - [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], - [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }], - [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], - require.resolve('@babel/plugin-proposal-export-default-from'), - require.resolve('@babel/plugin-proposal-export-namespace-from'), - require.resolve('@babel/plugin-proposal-object-rest-spread'), - require.resolve('@babel/plugin-transform-runtime'), - !isProd && require.resolve('react-refresh/babel'), - ] - .filter(Boolean) - .concat([ - [ - 'babel-plugin-import', - { - libraryName: 'antd', - style: true, - }, - ], - '@babel/plugin-transform-object-assign', - ]), -}; - -module.exports = () => { - const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css'; - const plugins = [ - new CoverHtmlWebpackPlugin(), - new ProgressBarPlugin(), - new CaseSensitivePathsPlugin(), - new MiniCssExtractPlugin({ - filename: cssFileName, - }), - !isProd && - new ReactRefreshWebpackPlugin({ - overlay: false, - }), - ].filter(Boolean); - const resolve = { - symlinks: false, - extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'], - alias: webpackConfigResolveAlias, - }; - - if (isProd) { - plugins.push(new CleanWebpackPlugin()); - } - - if (!isProd) { - resolve.mainFields = ['module', 'browser', 'main']; - } - - return { - externals: isProd - ? [ - /^react$/, - /^react\/lib.*/, - /^react-dom$/, - /.*react-dom.*/, - /^single-spa$/, - /^single-spa-react$/, - /^moment$/, - /^antd$/, - /^lodash$/, - /^echarts$/, - /^react-router$/, - /^react-router-dom$/, - ] - : [], - resolve, - plugins, - module: { - rules: [ - { - parser: { system: false }, - }, - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: [ - { - loader: 'babel-loader', - options: babelOptions, - }, - ], - }, - { - test: /\.(ts|tsx)$/, - use: [ - { - loader: 'babel-loader', - options: babelOptions, - }, - { - loader: 'ts-loader', - options: { - allowTsInNodeModules: true, - }, - }, - ], - }, - { - test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf|otf)$/, - use: [ - { - loader: 'file-loader', - options: { - name: '[name].[ext]', - outputPath: './assets/image/', - esModule: false, - }, - }, - ], - }, - { - test: /\.(css|less)$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, - }, - 'css-loader', - { - loader: 'less-loader', - options: { - javascriptEnabled: true, - modifyVars: theme, - }, - }, - ], - }, - ], - }, - optimization: Object.assign( - isProd - ? { - splitChunks: { - cacheGroups: { - vendor: { - test: /[\\/]node_modules[\\/]/, - chunks: 'all', - name: 'vendor', - priority: 10, - enforce: true, - minChunks: 1, - maxSize: 3000000, - }, - }, - }, - minimizer: [ - new TerserJSPlugin({ - cache: true, - sourceMap: true, - }), - new OptimizeCSSAssetsPlugin({}), - ], - } - : {} - ), - devtool: isProd ? 'cheap-module-source-map' : '', - node: { - fs: 'empty', - net: 'empty', - tls: 'empty', - }, - }; -}; diff --git a/km-console/packages/layout-clusters-fe/config/webpack.common.js b/km-console/packages/layout-clusters-fe/config/webpack.common.js new file mode 100644 index 0000000000000000000000000000000000000000..bf13a5d66b4c3de946ab99d7761910f4721bc05a --- /dev/null +++ b/km-console/packages/layout-clusters-fe/config/webpack.common.js @@ -0,0 +1,123 @@ +const path = require('path'); +const theme = require('./theme'); +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ProgressBarPlugin = require('progress-bar-webpack-plugin'); +const CoverHtmlWebpackPlugin = require('./CoverHtmlWebpackPlugin.js'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); + +const devMode = process.env.NODE_ENV === 'development'; +const babelOptions = { + cacheDirectory: true, + babelrc: false, + presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react')], + plugins: [ + [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], + [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], + require.resolve('@babel/plugin-proposal-export-default-from'), + require.resolve('@babel/plugin-proposal-export-namespace-from'), + require.resolve('@babel/plugin-proposal-object-rest-spread'), + require.resolve('@babel/plugin-transform-runtime'), + devMode && require.resolve('react-refresh/babel'), + devMode && [ + 'babel-plugin-import', + { + libraryName: 'antd', + style: true, + }, + ], + ].filter(Boolean), +}; + +module.exports = { + entry: { + layout: ['./src/index.tsx'], + }, + resolve: { + symlinks: false, + extensions: ['.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'], + alias: { + '@src': path.resolve('src'), + }, + }, + plugins: [ + new CoverHtmlWebpackPlugin(), + new ProgressBarPlugin(), + new CaseSensitivePathsPlugin(), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + RUN_ENV: JSON.stringify(process.env.RUN_ENV), + BUSINESS_VERSION: process.env.BUSINESS_VERSION === 'true', + PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH), + }, + }), + new HtmlWebpackPlugin({ + meta: { + manifest: 'manifest.json', + }, + template: './src/index.html', + favicon: path.resolve('favicon.ico'), + inject: 'body', + }), + ], + module: { + rules: [ + { + parser: { system: false }, + }, + { + test: /\.(js|jsx|ts|tsx)$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: babelOptions, + }, + { + loader: 'ts-loader', + options: { + allowTsInNodeModules: true, + }, + }, + ], + }, + { + test: /\.(png|svg|jpeg|jpg|gif|ttf|woff|woff2|eot|pdf|otf)$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: './assets/image/', + esModule: false, + }, + }, + ], + }, + { + test: /\.(css|less)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'less-loader', + options: { + javascriptEnabled: true, + modifyVars: theme, + }, + }, + ], + }, + ], + }, + node: { + fs: 'empty', + net: 'empty', + tls: 'empty', + }, + stats: 'errors-warnings', +}; diff --git a/km-console/packages/layout-clusters-fe/config/webpack.dev.js b/km-console/packages/layout-clusters-fe/config/webpack.dev.js new file mode 100644 index 0000000000000000000000000000000000000000..60f2bbf29372f160dc4ede41e62109e0487ad24f --- /dev/null +++ b/km-console/packages/layout-clusters-fe/config/webpack.dev.js @@ -0,0 +1,45 @@ +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); + +module.exports = { + mode: 'development', + plugins: [ + new MiniCssExtractPlugin(), + new ReactRefreshWebpackPlugin({ + overlay: false, + }), + ], + output: { + path: '/', + publicPath: '/', + filename: '[name].js', + chunkFilename: '[name].js', + library: 'layout', + libraryTarget: 'amd', + }, + devServer: { + host: 'localhost', + port: 8000, + hot: true, + open: true, + openPage: 'http://localhost:8000/', + inline: true, + historyApiFallback: true, + publicPath: `http://localhost:8000/`, + headers: { + 'cache-control': 'no-cache', + pragma: 'no-cache', + 'Access-Control-Allow-Origin': '*', + }, + proxy: { + '/ks-km/api/v3': { + changeOrigin: true, + target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/', + }, + '/logi-security/api/v1': { + changeOrigin: true, + target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/', + }, + }, + }, +}; diff --git a/km-console/packages/layout-clusters-fe/config/webpack.prod.js b/km-console/packages/layout-clusters-fe/config/webpack.prod.js new file mode 100644 index 0000000000000000000000000000000000000000..025ddd69904cfdd4f097c491956412800ee7dc27 --- /dev/null +++ b/km-console/packages/layout-clusters-fe/config/webpack.prod.js @@ -0,0 +1,79 @@ +const path = require('path'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const CountPlugin = require('./CountComponentWebpackPlugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const TerserJSPlugin = require('terser-webpack-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); + +const outputPath = path.resolve(process.cwd(), `../../../km-rest/src/main/resources/templates/layout`); + +module.exports = { + mode: 'production', + plugins: [ + new CleanWebpackPlugin(), + new CountPlugin({ + pathname: 'knowdesign', + startCount: true, + isExportExcel: false, + }), + new MiniCssExtractPlugin({ + filename: '[name]-[chunkhash].css', + }), + new CopyWebpackPlugin([ + { + from: path.resolve(process.cwd(), 'static'), + to: path.resolve(outputPath, '../static'), + }, + { + from: path.resolve(process.cwd(), 'favicon.ico'), + to: path.resolve(outputPath, '../favicon.ico'), + }, + ]), + ], + externals: [ + /^react$/, + /^react\/lib.*/, + /^react-dom$/, + /.*react-dom.*/, + /^single-spa$/, + /^single-spa-react$/, + /^moment$/, + /^antd$/, + /^lodash$/, + /^echarts$/, + /^react-router$/, + /^react-router-dom$/, + ], + output: { + path: outputPath, + publicPath: process.env.PUBLIC_PATH + '/layout/', + filename: '[name]-[chunkhash].js', + chunkFilename: '[name]-[chunkhash].js', + library: 'layout', + libraryTarget: 'amd', + }, + optimization: { + splitChunks: { + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/]/, + chunks: 'all', + name: 'vendor', + priority: 10, + enforce: true, + minChunks: 1, + maxSize: 3000000, + }, + }, + }, + minimizer: [ + new TerserJSPlugin({ + cache: true, + sourceMap: true, + }), + new OptimizeCSSAssetsPlugin({}), + ], + }, + devtool: 'none', +}; diff --git a/km-console/packages/layout-clusters-fe/config/webpackConfigResolveAlias.js b/km-console/packages/layout-clusters-fe/config/webpackConfigResolveAlias.js deleted file mode 100755 index 2499d7bfc1e71932b0ab3accab7f519a7ea75fde..0000000000000000000000000000000000000000 --- a/km-console/packages/layout-clusters-fe/config/webpackConfigResolveAlias.js +++ /dev/null @@ -1,5 +0,0 @@ -var path = require('path'); - -module.exports = { - react: path.resolve('./node_modules/react'), -}; diff --git a/km-console/packages/layout-clusters-fe/webpack.config.js b/km-console/packages/layout-clusters-fe/webpack.config.js index 2b1cb7de7144b81aea8fd029dbd86401583e76a3..972f46a4607c9f7dc2a5a2353f96f4b5d7000077 100644 --- a/km-console/packages/layout-clusters-fe/webpack.config.js +++ b/km-console/packages/layout-clusters-fe/webpack.config.js @@ -1,98 +1,9 @@ const path = require('path'); require('dotenv').config({ path: path.resolve(process.cwd(), '../../.env') }); -const webpack = require('webpack'); const merge = require('webpack-merge'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const getWebpackCommonConfig = require('./config/d1-webpack.base'); -const CountPlugin = require('./config/CountComponentWebpackPlugin'); -const isProd = process.env.NODE_ENV === 'production'; -const jsFileName = isProd ? '[name]-[chunkhash].js' : '[name].js'; -const outPath = path.resolve(__dirname, `../../../km-rest/src/main/resources/templates/layout`); -module.exports = merge(getWebpackCommonConfig(), { - mode: isProd ? 'production' : 'development', - entry: { - layout: ['./src/index.tsx'], - }, - plugins: [ - isProd - ? new CountPlugin({ - pathname: 'knowdesign', - startCount: true, - isExportExcel: false, - }) - : undefined, - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - RUN_ENV: JSON.stringify(process.env.RUN_ENV), - BUSINESS_VERSION: process.env.BUSINESS_VERSION === 'true', - PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH), - }, - }), - new HtmlWebpackPlugin({ - meta: { - manifest: 'manifest.json', - }, - template: './src/index.html', - favicon: path.resolve('favicon.ico'), - inject: 'body', - }), - new CopyWebpackPlugin( - [ - { - from: path.resolve(__dirname, 'static'), - to: path.resolve(outPath, '../static'), - }, - ].concat( - isProd - ? [ - { - from: path.resolve(__dirname, 'favicon.ico'), - to: path.resolve(outPath, '../favicon.ico'), - }, - ] - : [] - ) - ), - ].filter((p) => p), - output: { - path: outPath, - publicPath: isProd ? process.env.PUBLIC_PATH + '/layout/' : '/', - filename: jsFileName, - chunkFilename: jsFileName, - library: 'layout', - libraryTarget: 'amd', - }, - devServer: { - host: 'localhost', - port: 8000, - hot: true, - open: true, - openPage: 'http://localhost:8000/', - inline: true, - historyApiFallback: true, - publicPath: `http://localhost:8000/`, - headers: { - 'cache-control': 'no-cache', - pragma: 'no-cache', - 'Access-Control-Allow-Origin': '*', - }, - proxy: { - '/ks-km/api/v3': { - changeOrigin: true, - target: 'http://localhost:8080/', - }, - '/logi-security/api/v1': { - changeOrigin: true, - target: 'http://localhost:8080/', - }, - }, - }, +const devMode = process.env.NODE_ENV === 'development'; +const commonConfig = require('./config/webpack.common'); +const devConfig = require('./config/webpack.dev'); +const prodConfig = require('./config/webpack.prod'); - resolve: { - alias: { - '@src': path.resolve(__dirname, 'src'), - }, - }, -}); +module.exports = merge(commonConfig, devMode ? devConfig : prodConfig);