mirror of
https://github.com/didi/KnowStreaming.git
synced 2025-12-24 20:22:12 +08:00
refactor: webpack 配置结构调整
This commit is contained in:
GraceWalk
@@ -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',
|
||||
},
|
||||
};
|
||||
};
|
||||
132
km-console/packages/config-manager-fe/config/webpack.common.js
Normal file
132
km-console/packages/config-manager-fe/config/webpack.common.js
Normal file
@@ -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',
|
||||
};
|
||||
35
km-console/packages/config-manager-fe/config/webpack.dev.js
Normal file
35
km-console/packages/config-manager-fe/config/webpack.dev.js
Normal file
@@ -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',
|
||||
};
|
||||
59
km-console/packages/config-manager-fe/config/webpack.prod.js
Normal file
59
km-console/packages/config-manager-fe/config/webpack.prod.js
Normal file
@@ -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',
|
||||
};
|
||||
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
};
|
||||
};
|
||||
123
km-console/packages/layout-clusters-fe/config/webpack.common.js
Normal file
123
km-console/packages/layout-clusters-fe/config/webpack.common.js
Normal file
@@ -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',
|
||||
};
|
||||
45
km-console/packages/layout-clusters-fe/config/webpack.dev.js
Normal file
45
km-console/packages/layout-clusters-fe/config/webpack.dev.js
Normal file
@@ -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/',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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',
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
react: path.resolve('./node_modules/react'),
|
||||
};
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user