diff --git a/config/mp/webpack.config.js b/config/mp/webpack.config.js index d37c6cb..cbd0be4 100644 --- a/config/mp/webpack.config.js +++ b/config/mp/webpack.config.js @@ -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({ diff --git a/config/web/webpack.config.js b/config/web/webpack.config.js index 101800a..b174a11 100644 --- a/config/web/webpack.config.js +++ b/config/web/webpack.config.js @@ -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 &&