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

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

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