From 7e72576914fae5e658ed87fbeacca8d52313ff0c Mon Sep 17 00:00:00 2001 From: wkj <278599135@.com> Date: Thu, 25 Apr 2024 16:58:47 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8Dstaging=E7=8E=AF=E5=A2=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/mp/webpack.config.js | 33 +-- config/web/webpack.config.js | 419 ++++++++++++++++----------------- lib/build.js | 12 +- lib/create.js | 2 +- lib/index.js | 3 - lib/server/start.js | 3 +- lib/template.js | 5 + scripts/build-staging-mp.js | 2 +- scripts/build-staging-web.js | 2 +- src/build.ts | 13 +- src/index.ts | 3 - src/server/start.ts | 5 +- src/template.ts | 5 + template/web/public/index.html | 2 +- 14 files changed, 234 insertions(+), 275 deletions(-) diff --git a/config/mp/webpack.config.js b/config/mp/webpack.config.js index bfb09e4..84b59cb 100644 --- a/config/mp/webpack.config.js +++ b/config/mp/webpack.config.js @@ -9,12 +9,8 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const UiExtractPlugin = require('ui-extract-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); -const ForkTsCheckerWebpackPlugin = - process.env.TSC_COMPILE_ON_ERROR === 'true' - ? require('./../../plugins/ForkTsCheckerWarningWebpackPlugin') - : require('react-dev-utils/ForkTsCheckerWebpackPlugin'); -const BundleAnalyzerPlugin = - require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const ForkTsCheckerWebpackPlugin = require('./../../plugins/ForkTsCheckerWarningWebpackPlugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const OakWeChatMpPlugin = require('../../plugins/WechatMpPlugin'); @@ -46,8 +42,10 @@ const copyPatterns = [].concat(pkg.copyWebpack || []).map((pattern) => const oakRegex = /(\/*[a-zA-Z0-9_-])*\/(lib|src|es)\/|(\\*[a-zA-Z0-9_-])*\\(lib|src|es)\\/; module.exports = function (webpackEnv) { + // staging 把mode改为none，其他跟production一样 + const isEnvStaging = webpackEnv === 'staging'; const isEnvDevelopment = webpackEnv === 'development'; - const isEnvProduction = webpackEnv === 'production'; + const isEnvProduction = webpackEnv === 'production' || isEnvStaging; const oakFileLoader = (ext = '[ext]') => { return { @@ -91,7 +89,9 @@ module.exports = function (webpackEnv) { target: ['web'], // Webpack noise constrained to errors and warnings stats: 'errors-warnings', - mode: isEnvProduction + mode: isEnvStaging + ? 'none' + : isEnvProduction ? 'production' : isEnvDevelopment && 'development', // Stop compilation early in production @@ -325,9 +325,7 @@ module.exports = function (webpackEnv) { name: 'oak-debugPanel', show: !isEnvProduction, }, - split: isEnvProduction - ? true - : isEnvDevelopment && process.env.SPLIT === 'true', + split: isEnvProduction ? true : false, }), new webpack.DefinePlugin(env.stringified), new StylelintPlugin({ @@ -352,19 +350,6 @@ module.exports = function (webpackEnv) { typescriptPath: resolve.sync('typescript', { basedir: paths.appNodeModules, }), - // configOverwrite: { - // compilerOptions: { - // sourceMap: isEnvProduction - // ? shouldUseSourceMap - // : isEnvDevelopment, - // skipLibCheck: true, - // inlineSourceMap: false, - // declarationMap: false, - // noEmit: true, - // incremental: true, - // tsBuildInfoFile: paths.appTsBuildInfoFile, - // }, - // }, configFile: paths.appTsConfig, context: paths.appRootPath, diagnosticOptions: { diff --git a/config/web/webpack.config.js b/config/web/webpack.config.js index d14f38d..92bcd42 100644 --- a/config/web/webpack.config.js +++ b/config/web/webpack.config.js @@ -20,13 +20,9 @@ const paths = require('./paths'); const modules = require('./modules'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); -const ForkTsCheckerWebpackPlugin = - process.env.TSC_COMPILE_ON_ERROR === 'true' - ? require('./../../plugins/ForkTsCheckerWarningWebpackPlugin') - : require('react-dev-utils/ForkTsCheckerWebpackPlugin'); +const ForkTsCheckerWebpackPlugin = require('./../../plugins/ForkTsCheckerWarningWebpackPlugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); -const BundleAnalyzerPlugin = - require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const CompressionWebpackPlugin = require('compression-webpack-plugin'); const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash'); @@ -102,6 +98,8 @@ const hasJsxRuntime = (() => { // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function (webpackEnv) { + // staging 把mode改为none，其他跟production一样 + const isEnvStaging = webpackEnv === 'staging'; const isEnvDevelopment = webpackEnv === 'development'; const isEnvProduction = webpackEnv === 'production'; @@ -118,7 +116,6 @@ module.exports = function (webpackEnv) { const shouldUseReactRefresh = env.raw.FAST_REFRESH; - // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor, preProcessOptions) => { const loaders = [ @@ -148,34 +145,34 @@ module.exports = function (webpackEnv) { config: false, plugins: !useTailwind ? [ - 'postcss-flexbugs-fixes', - [ - 'postcss-preset-env', - { - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }, - ], - // Adds PostCSS Normalize as the reset css with default options, - // so that it honors browserslist config in package.json - // which in turn let's users customize the target behavior as per their needs. - 'postcss-normalize', - ] + 'postcss-flexbugs-fixes', + [ + 'postcss-preset-env', + { + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }, + ], + // Adds PostCSS Normalize as the reset css with default options, + // so that it honors browserslist config in package.json + // which in turn let's users customize the target behavior as per their needs. + 'postcss-normalize', + ] : [ - 'tailwindcss', - 'postcss-flexbugs-fixes', - [ - 'postcss-preset-env', - { - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - }, - ], - ], + 'tailwindcss', + 'postcss-flexbugs-fixes', + [ + 'postcss-preset-env', + { + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }, + ], + ], }, sourceMap: isEnvProduction ? shouldUseSourceMap @@ -196,9 +193,12 @@ module.exports = function (webpackEnv) { }, { loader: require.resolve(preProcessor), - options: Object.assign({ - sourceMap: true, - }, preProcessOptions), + options: Object.assign( + { + sourceMap: true, + }, + preProcessOptions + ), } ); } @@ -206,14 +206,17 @@ module.exports = function (webpackEnv) { }; // 读取编译配置 - const compilerConfigurationFile = path.join(paths.appRootPath, 'configuration', 'compiler.js'); - const projectConfiguration = fs.existsSync(compilerConfigurationFile) && require(compilerConfigurationFile).webpack; + const compilerConfigurationFile = path.join( + paths.appRootPath, + 'configuration', + 'compiler.js' + ); + const projectConfiguration = + fs.existsSync(compilerConfigurationFile) && + require(compilerConfigurationFile).webpack; const getOakInclude = () => { - const result = [ - /oak-frontend-base/, - /oak-general-business/, - ]; + const result = [/oak-frontend-base/, /oak-general-business/]; if (projectConfiguration && projectConfiguration.extraOakModules) { result.push(...projectConfiguration.extraOakModules); } @@ -260,14 +263,14 @@ module.exports = function (webpackEnv) { // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction ? (info) => - path - .relative(paths.appSrc, info.absoluteResourcePath) - .replace(/\\/g, '/') + path + .relative(paths.appSrc, info.absoluteResourcePath) + .replace(/\\/g, '/') : isEnvDevelopment && - ((info) => - path - .resolve(info.absoluteResourcePath) - .replace(/\\/g, '/')), + ((info) => + path + .resolve(info.absoluteResourcePath) + .replace(/\\/g, '/')), }, cache: { type: 'filesystem', @@ -381,14 +384,14 @@ module.exports = function (webpackEnv) { stream: require.resolve('stream-browserify'), zlib: require.resolve('browserify-zlib'), querystring: require.resolve('querystring-es3'), - events: path.resolve(__dirname, '../../node_modules/events'), + events: require.resolve('events/'), os: false, url: false, path: false, fs: false, net: false, tls: false, - } + }; if ( projectConfiguration && projectConfiguration.resolve && @@ -569,10 +572,10 @@ module.exports = function (webpackEnv) { plugins: [ isEnvDevelopment && - shouldUseReactRefresh && - require.resolve( - 'react-refresh/babel' - ), + shouldUseReactRefresh && + require.resolve( + 'react-refresh/babel' + ), oakPathTsxPlugin, oakRenderTsxPlugin, // oakRouterPlugin, @@ -787,14 +790,14 @@ module.exports = function (webpackEnv) { }, plugins: [ isEnvProduction && - new CompressionWebpackPlugin({ - filename: '[path][base].gz', //压缩后的文件名 - algorithm: 'gzip', //压缩格式 有：gzip、brotliCompress - test: /\.(js|css|svg)$/, - threshold: 10240, // 只处理比这个值大的资源，按字节算 - minRatio: 0.8, //只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩 - deleteOriginalAssets: false, //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件 - }), + new CompressionWebpackPlugin({ + filename: '[path][base].gz', //压缩后的文件名 + algorithm: 'gzip', //压缩格式 有：gzip、brotliCompress + test: /\.(js|css|svg)$/, + threshold: 10240, // 只处理比这个值大的资源，按字节算 + minRatio: 0.8, //只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩 + deleteOriginalAssets: false, //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件 + }), // Generates an `index.html` file with the