Oak-Team
/
oak-cli
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 19 Wiki Activity

staging打包命令支持 --sourcemap

This commit is contained in:
wkj 2024-05-29 12:09:41 +08:00
parent d5cb474480
commit a88cc7dd0d
2 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
config/mp/webpack.config.js
View File

@ -42,10 +42,12 @@ const copyPatterns = [].concat(pkg.copyWebpack || []).map((pattern) =>
const oakRegex = /(\/*[a-zA-Z0-9_-])*\/(lib|src|es)\/|(\\*[a-zA-Z0-9_-])*\\(lib|src|es)\\/; const oakRegex = /(\/*[a-zA-Z0-9_-])*\/(lib|src|es)\/|(\\*[a-zA-Z0-9_-])*\\(lib|src|es)\\/;
module.exports = function (webpackEnv) { module.exports = function (webpackEnv) {
// staging 把mode改为none，其他跟production一样 // 生产环境跟staging环境 mode不同，其他的配置应该一致
const isEnvStaging = webpackEnv === 'staging'; const isEnvStaging = webpackEnv === 'staging';
const isEnvDevelopment = webpackEnv === 'development'; const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production'; const isEnvProduction = webpackEnv === 'production';
// 生产环境跟staging环境 shouldUseSourceMap为true 编译带上SourceMap
const sourceMap = !isEnvDevelopment ? shouldUseSourceMap : isEnvDevelopment;
const oakFileLoader = (ext = '[ext]') => { const oakFileLoader = (ext = '[ext]') => {
return { return {
@ -73,10 +75,7 @@ module.exports = function (webpackEnv) {
require(compilerConfigurationFile).webpack; require(compilerConfigurationFile).webpack;
const getOakInclude = () => { const getOakInclude = () => {
const result = [ const result = [/oak-frontend-base/, /oak-general-business/];
/oak-frontend-base/,
/oak-general-business/
];
if (projectConfiguration && projectConfiguration.extraOakModules) { if (projectConfiguration && projectConfiguration.extraOakModules) {
result.push(...projectConfiguration.extraOakModules); result.push(...projectConfiguration.extraOakModules);
@ -89,19 +88,14 @@ module.exports = function (webpackEnv) {
target: ['web'], target: ['web'],
// Webpack noise constrained to errors and warnings // Webpack noise constrained to errors and warnings
stats: 'errors-warnings', stats: 'errors-warnings',
mode: isEnvStaging mode: isEnvStaging ? 'none' : (isEnvProduction ? 'production' : 'development'),
? 'none'
: isEnvProduction
? 'production'
: isEnvDevelopment && 'development',
// Stop compilation early in production // Stop compilation early in production
bail: isEnvProduction || isEnvStaging, bail: !isEnvDevelopment,
devtool: // 生产环境和staging 默认false，但命令加上--sourcemap时 使用source-map
isEnvProduction || isEnvStaging // 开发环境 使用cheap-module-source-map
? shouldUseSourceMap devtool: !isEnvDevelopment
? 'source-map' ? (shouldUseSourceMap ? 'source-map' : false)
: false : 'cheap-module-source-map',
: isEnvDevelopment && 'cheap-module-source-map',
entry: { entry: {
app: paths.appIndexJs, app: paths.appIndexJs,
}, },
@ -189,7 +183,7 @@ module.exports = function (webpackEnv) {
// 标记未被使用的代码 // 标记未被使用的代码
usedExports: true, usedExports: true,
// 删除 usedExports 标记的未使用的代码 // 删除 usedExports 标记的未使用的代码
minimize: isEnvProduction || isEnvStaging, minimize: !isEnvDevelopment,
minimizer: [ minimizer: [
new TerserPlugin({ new TerserPlugin({
extractComments: false, extractComments: false,
@ -319,9 +313,9 @@ module.exports = function (webpackEnv) {
include: ['project.config.json', 'sitemap.json'], include: ['project.config.json', 'sitemap.json'],
debugPanel: { debugPanel: {
name: 'oak-debugPanel', name: 'oak-debugPanel',
show: !(isEnvProduction || isEnvStaging), show: isEnvDevelopment,
}, },
split: isEnvProduction || isEnvStaging ? true : false, split: !isEnvDevelopment ? true : false,
}), }),
new webpack.DefinePlugin(env.stringified), new webpack.DefinePlugin(env.stringified),
new StylelintPlugin({ new StylelintPlugin({

67
config/web/webpack.config.js
View File

@ -98,15 +98,17 @@ const hasJsxRuntime = (() => {
// This is the production and development configuration. // This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle. // It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) { module.exports = function (webpackEnv) {
// staging 把mode改为none，其他跟production一样 // 生产环境跟staging环境 mode不同，其他的配置应该一致
const isEnvStaging = webpackEnv === 'staging'; const isEnvStaging = webpackEnv === 'staging';
const isEnvDevelopment = webpackEnv === 'development'; const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production'; const isEnvProduction = webpackEnv === 'production';
// 生产环境跟staging环境 shouldUseSourceMap为true 编译带上SourceMap
const sourceMap = !isEnvDevelopment ? shouldUseSourceMap : isEnvDevelopment;
// Variable used for enabling profiling in Production // Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command // passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile = const isEnvProductionProfile = !isEnvDevelopment && process.argv.includes('--profile');
isEnvProduction && process.argv.includes('--profile');
// We will provide `paths.publicUrlOrPath` to our app // We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@ -120,7 +122,7 @@ module.exports = function (webpackEnv) {
const getStyleLoaders = (cssOptions, preProcessor, preProcessOptions) => { const getStyleLoaders = (cssOptions, preProcessor, preProcessOptions) => {
const loaders = [ const loaders = [
isEnvDevelopment && require.resolve('style-loader'), isEnvDevelopment && require.resolve('style-loader'),
(isEnvProduction || isEnvStaging) && { !isEnvDevelopment && {
loader: MiniCssExtractPlugin.loader, loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder // css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path // in production `paths.publicUrlOrPath` can be a relative path
@ -174,7 +176,7 @@ module.exports = function (webpackEnv) {
], ],
], ],
}, },
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
}, },
}, },
].filter(Boolean); ].filter(Boolean);
@ -183,7 +185,7 @@ module.exports = function (webpackEnv) {
{ {
loader: require.resolve('resolve-url-loader'), loader: require.resolve('resolve-url-loader'),
options: { options: {
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
root: paths.appRootSrc, root: paths.appRootSrc,
}, },
}, },
@ -191,7 +193,7 @@ module.exports = function (webpackEnv) {
loader: require.resolve(preProcessor), loader: require.resolve(preProcessor),
options: Object.assign( options: Object.assign(
{ {
sourceMap: isEnvDevelopment, sourceMap: true,
}, },
preProcessOptions preProcessOptions
), ),
@ -224,14 +226,14 @@ module.exports = function (webpackEnv) {
target: ['browserslist'], target: ['browserslist'],
// Webpack noise constrained to errors and warnings // Webpack noise constrained to errors and warnings
stats: 'errors-warnings', stats: 'errors-warnings',
mode: isEnvStaging ? 'none' : (isEnvProduction mode: isEnvStaging ? 'none' : (isEnvProduction ? 'production' : 'development'),
? 'production'
: isEnvDevelopment && 'development'),
// Stop compilation early in production // Stop compilation early in production
bail: isEnvProduction, bail: !isEnvDevelopment,
devtool: (!isEnvProduction || shouldUseSourceMap) // 生产环境和staging 默认false，但命令加上--sourcemap时 使用source-map
? (isEnvDevelopment ? 'source-map' : 'cheap-module-source-map') // 开发环境 使用cheap-module-source-map
: false, devtool: !isEnvDevelopment
? (shouldUseSourceMap ? 'source-map' : false)
: 'cheap-module-source-map',
// These are the "entry points" to our application. // These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle. // This means they will be the "root" imports that are included in JS bundle.
entry: paths.appIndexJs, entry: paths.appIndexJs,
@ -242,11 +244,11 @@ module.exports = function (webpackEnv) {
pathinfo: isEnvDevelopment, pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk. // There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files. // In development, it does not produce real files.
filename: isEnvProduction filename: !isEnvDevelopment
? 'static/js/[name].[contenthash:8].js' ? 'static/js/[name].[contenthash:8].js'
: 'static/js/bundle.js', : 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting. // There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction chunkFilename: !isEnvDevelopment
? 'static/js/[name].[contenthash:8].chunk.js' ? 'static/js/[name].[contenthash:8].chunk.js'
: 'static/js/[name].chunk.js', : 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]', assetModuleFilename: 'static/media/[name].[hash][ext]',
@ -255,15 +257,15 @@ module.exports = function (webpackEnv) {
// We inferred the "public path" (such as / or /my-project) from homepage. // We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath, publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction devtoolModuleFilenameTemplate: !isEnvDevelopment
? (info) => ? (info) =>
path path
.relative(paths.appSrc, info.absoluteResourcePath) .relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/') .replace(/\\/g, '/')
: ((info) => : (info) =>
path path
.resolve(info.absoluteResourcePath) .resolve(info.absoluteResourcePath)
.replace(/\\/g, '/')), .replace(/\\/g, '/'),
}, },
cache: { cache: {
type: 'filesystem', type: 'filesystem',
@ -282,7 +284,7 @@ module.exports = function (webpackEnv) {
level: 'none', level: 'none',
}, },
optimization: { optimization: {
minimize: isEnvProduction, minimize: !isEnvDevelopment,
minimizer: [ minimizer: [
// This is only used in production mode // This is only used in production mode
new TerserPlugin({ new TerserPlugin({
@ -590,7 +592,7 @@ module.exports = function (webpackEnv) {
cacheDirectory: false, cacheDirectory: false,
// See #6846 for context on why cacheCompression is disabled // See #6846 for context on why cacheCompression is disabled
cacheCompression: false, cacheCompression: false,
compact: isEnvProduction, compact: !isEnvDevelopment,
}, },
}, },
], ],
@ -636,7 +638,7 @@ module.exports = function (webpackEnv) {
exclude: cssModuleRegex, exclude: cssModuleRegex,
use: getStyleLoaders({ use: getStyleLoaders({
importLoaders: 1, importLoaders: 1,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'icss', mode: 'icss',
}, },
@ -653,7 +655,7 @@ module.exports = function (webpackEnv) {
test: cssModuleRegex, test: cssModuleRegex,
use: getStyleLoaders({ use: getStyleLoaders({
importLoaders: 1, importLoaders: 1,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'local', mode: 'local',
getLocalIdent: getCSSModuleLocalIdent, getLocalIdent: getCSSModuleLocalIdent,
@ -669,7 +671,7 @@ module.exports = function (webpackEnv) {
use: getStyleLoaders( use: getStyleLoaders(
{ {
importLoaders: 3, importLoaders: 3,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'icss', mode: 'icss',
}, },
@ -689,7 +691,7 @@ module.exports = function (webpackEnv) {
use: getStyleLoaders( use: getStyleLoaders(
{ {
importLoaders: 3, importLoaders: 3,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'local', mode: 'local',
getLocalIdent: getCSSModuleLocalIdent, getLocalIdent: getCSSModuleLocalIdent,
@ -704,7 +706,7 @@ module.exports = function (webpackEnv) {
use: getStyleLoaders( use: getStyleLoaders(
{ {
importLoaders: 3, importLoaders: 3,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'icss', mode: 'icss',
}, },
@ -727,7 +729,7 @@ module.exports = function (webpackEnv) {
use: getStyleLoaders( use: getStyleLoaders(
{ {
importLoaders: 3, importLoaders: 3,
sourceMap: isEnvDevelopment, sourceMap: sourceMap,
modules: { modules: {
mode: 'local', mode: 'local',
getLocalIdent: getCSSModuleLocalIdent, getLocalIdent: getCSSModuleLocalIdent,
@ -770,7 +772,7 @@ module.exports = function (webpackEnv) {
].filter(Boolean), ].filter(Boolean),
}, },
plugins: [ plugins: [
isEnvProduction && !isEnvDevelopment &&
new CompressionWebpackPlugin({ new CompressionWebpackPlugin({
filename: '[path][base].gz', //压缩后的文件名 filename: '[path][base].gz', //压缩后的文件名
algorithm: 'gzip', //压缩格式 有：gzip、brotliCompress algorithm: 'gzip', //压缩格式 有：gzip、brotliCompress
@ -787,7 +789,7 @@ module.exports = function (webpackEnv) {
inject: true, inject: true,
template: paths.appHtml, template: paths.appHtml,
}, },
isEnvProduction !isEnvDevelopment
? { ? {
minify: { minify: {
removeComments: true, removeComments: true,
@ -808,7 +810,7 @@ module.exports = function (webpackEnv) {
// Inlines the webpack runtime script. This script is too small to warrant // Inlines the webpack runtime script. This script is too small to warrant
// a network request. // a network request.
// https://github.com/facebook/create-react-app/issues/5358 // https://github.com/facebook/create-react-app/issues/5358
isEnvProduction && !isEnvDevelopment &&
shouldInlineRuntimeChunk && shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [ new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [
/runtime-.+[.]js/, /runtime-.+[.]js/,
@ -839,7 +841,7 @@ module.exports = function (webpackEnv) {
// a plugin that prints an error when you attempt to do this. // a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240 // See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(), isEnvDevelopment && new CaseSensitivePathsPlugin(),
(isEnvProduction || isEnvStaging) && !isEnvDevelopment &&
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output // Options similar to the same options in webpackOptions.output
// both options are optional // both options are optional
@ -882,7 +884,7 @@ module.exports = function (webpackEnv) {
}), }),
// Generate a service worker script that will precache, and keep up to date, // Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build. // the HTML & assets that are part of the webpack build.
isEnvProduction && (isEnvProduction || isEnvStaging) &&
fs.existsSync(swSrc) && fs.existsSync(swSrc) &&
new WorkboxWebpackPlugin.InjectManifest({ new WorkboxWebpackPlugin.InjectManifest({
swSrc, swSrc,
@ -935,6 +937,7 @@ module.exports = function (webpackEnv) {
logger: { logger: {
log: (message) => console.log(message), log: (message) => console.log(message),
error: (message) => console.error(message), error: (message) => console.error(message),
warn: (message) => console.warn(message),
}, },
}), }),
!disableESLintPlugin && !disableESLintPlugin &&