akfun 5.1.15 → 5.1.17

package/src/webpack/loaderUtils.js

@@ -1,15 +1,10 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换extract-text-webpack-plugin
 // const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 不支持webpack4.0
-// 引入当前项目配置文件
-const config = require('../config/index');
 const postCssConfig = require('../config/postcss.config'); // PostCss的配置文件
 
 exports.assetsPath = function (_path) {
-  const assetsSubDirectory =
-    process.NODE_ENV === 'production'
-      ? config.build.assetsSubDirectory
-      : config.dev.assetsSubDirectory;
+  const assetsSubDirectory = '';
   return path.posix.join(assetsSubDirectory, _path);
 };
 
@@ -23,13 +18,29 @@ function getAssetsPath(url) {
   return newUrl;
 }
 
+/**
+ * 用于生成css-loader配置
+ * @param {*} options 
+ * @param {Object} options.envConfig 当前环境配置
+ * @param {Object} options.webpackConfig 当前webpack配置
+ * @returns {Object} css-loader配置
+ * webpackConfig.cssLoaderUrl, // 用于自定义css-loader配置项[url]
+ * webpackConfig.cssLoaderUrlDir, // 用于设置css-loader配置项[url]的生效目录
+ * webpackConfig.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
+ * webpackConfig.sassOptions, // 用于设置sass-loader配置项
+ * webpackConfig.productionSourceMap, // 生产环境sourceMap是true
+ * webpackConfig.NODE_ENV // 生产环境下：将相关的样式内容提取出来合并到一个文件中
+ * @returns {Object} css-loader 配置
+ */
 exports.cssLoaders = function (options) {
   options = options || {};
+  const curEnvConfig = options.envConfig || {};
+  const curWebpackConfig = options.webpackConfig || {};
 
   const VueCssLoader = {
     loader: 'vue-style-loader',
     options: {
-      sourceMap: options.sourceMap
+      sourceMap: curEnvConfig.productionSourceMap
     }
   };
 
@@ -39,22 +50,22 @@ exports.cssLoaders = function (options) {
       // url: false, // enables/disables url()/image-set() functions handling
       url: {
         filter: (url, resourcePath) => {
-          if (options.cssLoaderUrlDir && resourcePath.includes(options.cssLoaderUrlDir)) {
+          if (curWebpackConfig.cssLoaderUrlDir && resourcePath.includes(curWebpackConfig.cssLoaderUrlDir)) {
             // 指定处理某类路径下的中相关 css 文件中的 url
             return true;
           }
           if (url.startsWith('data:')) {
             // 不处理 css 中的 bas64 url
             return false;
-          } else if (options.cssLoaderUrl !== undefined) {
+          } else if (curWebpackConfig.cssLoaderUrl !== undefined) {
             // cssLoaderUrl 为false 则不处理 css 中的 url
-            return options.cssLoaderUrl;
+            return curWebpackConfig.cssLoaderUrl;
           }
           return true;
         }
       },
-      sourceMap: options.sourceMap,
-      ...(options.cssLoaderOption || {})
+      sourceMap: curEnvConfig.productionSourceMap,
+      ...(curWebpackConfig.cssLoaderOption || {})
     }
   };
 
@@ -62,7 +73,7 @@ exports.cssLoaders = function (options) {
     loader: 'postcss-loader',
     options: {
       ...postCssConfig,
-      ...(options.postCssLoaderOption || {})
+      ...(curWebpackConfig.postCssLoaderOption || {})
     }
   };
 
@@ -70,8 +81,7 @@ exports.cssLoaders = function (options) {
   function generateLoaders(loader, loaderOptions) {
     let loaders = [];
     // 生产环境使用MiniCssExtractPlugin提取css内容，用于提取css内容到一个独立的文件中
-    if (options.environment === 'prod') {
-      const curEnvConfig = options.envConfig || {};
+    if (curEnvConfig.NODE_ENV === 'production') {
       const cssExtract = curEnvConfig.cssExtract || curEnvConfig.cssExtract === undefined;
       // MiniCssExtractPlugin.loader 需要配合 MiniCssExtractPlugin 使用
       loaders = [
@@ -94,20 +104,20 @@ exports.cssLoaders = function (options) {
     if (loader) {
       loaders.push({
         loader: `${loader}-loader`,
-        options: { ...loaderOptions, sourceMap: options.sourceMap }
+        options: { ...loaderOptions, sourceMap: curEnvConfig.productionSourceMap }
       });
     }
 
     // 如果是sass、scss文件，则增加sass-resources-loader
     if (
       (loader === 'sass' || loader === 'scss') &&
-      config.webpack.sassResources &&
-      config.webpack.sassResources.length > 0
+      curWebpackConfig.sassResources &&
+      curWebpackConfig.sassResources.length > 0
     ) {
       loaders.push({
         loader: 'sass-resources-loader',
         options: {
-          resources: config.webpack.sassResources || []
+          resources: curWebpackConfig.sassResources || []
         }
       });
     }
@@ -115,7 +125,7 @@ exports.cssLoaders = function (options) {
     return loaders;
   }
 
-  const sassOptions = options.sassOptions || {};
+  const sassOptions = curWebpackConfig.sassOptions || {};
 
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {

package/src/webpack/vue-loader.conf.js

@@ -1,20 +1,10 @@
 const utils = require('./loaderUtils');
-// 引入当前项目配置文件
-const config = require('../config/index');
-const isProduction = process.NODE_ENV === 'production';
 
-module.exports = (curEnvConfig) => {
+module.exports = (curEnvConfig, curWebpackConfig) => {
   return {
     loaders: utils.cssLoaders({
       envConfig: curEnvConfig, // 当前环境变量
-      cssLoaderUrl: config.webpack.cssLoaderUrl, // 用于自定义css-loader配置项[url]
-      cssLoaderUrlDir: config.webpack.cssLoaderUrlDir, // 用于设置css-loader配置项[url]的生效目录
-      cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
-      sassOptions: config.webpack.sassOptions, // 用于设置sass-loader配置项
-      sourceMap: isProduction // 生产环境sourceMap是true
-        ? config.build.productionSourceMap
-        : config.dev.cssSourceMap,
-      environment: isProduction ? 'prod' : 'dev' // 生产环境下：将相关的样式内容提取出来合并到一个文件中
+      webpackConfig: curWebpackConfig, // 当前webpack配置
     }),
     transformToRequire: {
       video: 'src',

package/src/webpack/webpack.base.conf.js

@@ -13,8 +13,7 @@ const vueLoaderConfig = require('./vue-loader.conf');
 const { resolve, resolveToCurrentRoot } = require('../utils/pathUtils');
 const getProjectDir = require('../utils/getProjectDir');
 const catchVuePages = require('../utils/catchVuePages'); // 用于获取当前项目中的vue单文件
-// 引入当前项目配置文件
-const projectConfig = require('../config/index');
+const getProjectConfig = require('../config/index'); // 用于获取当前项目配置文件
 const babelConfig = require('../config/babel.config'); // Babel的配置文件
 const { buildBanner } = require('../utils/akfunParams');
 const getJsEntries = require('../utils/jsEntries');
@@ -32,9 +31,9 @@ const BannerPack = new webpack.BannerPlugin({
  * _curEnvConfig: 执行环境中的配置，用于记录 dev、build、build2lib 等对应的配置内容；
  * _akfunConfig：完整的配置对象
  */
-module.exports = (_curEnvConfig, _akfunConfig) => {
+module.exports = (_curEnvConfig, _akfunConfig, buildMode = 'build') => {
   const curEnvConfig = _curEnvConfig || {}; // 用于接收当前运行环境配置变量
-  let config = _akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  let config = _akfunConfig || getProjectConfig(); // 优先使用外部传进来的项目配置
   // 获取当前项目配置文件中的webpack配置
   const curWebpackConfig = config.webpack;
   // 获取当前项目目录
@@ -49,7 +48,20 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     curWebpackConfig.babelPlugins(babelConfig.plugins);
   }
 
+  // 获取缓存目录路径
+  const cacheDirectory = resolveToCurrentRoot('./node_modules/.cache/webpack');
+
   const webpackConfig = {
+    // Webpack 5 持久化缓存配置
+    cache: {
+      type: 'filesystem',
+      cacheDirectory: cacheDirectory,
+      buildDependencies: {
+        config: [__filename] // 当配置文件改变时，使缓存失效
+      },
+      name: `${curEnvConfig.NODE_ENV || 'development'}--${buildMode}-cache`,
+      compression: 'gzip' // 使用 gzip 压缩缓存文件以节省磁盘空间
+    },
     stats: {
       // cachedModules: false,
       // providedExports: true,
@@ -86,7 +98,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
           use: [
             {
               loader: 'vue-loader',
-              options: vueLoaderConfig(curEnvConfig) // 配置vue-loader相关的loader插件
+              options: vueLoaderConfig(curEnvConfig, curWebpackConfig) // 配置vue-loader相关的loader插件
             }
           ]
         },
@@ -96,7 +108,13 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
           use: [
             {
               loader: 'babel-loader',
-              options: babelConfig
+              options: {
+                ...babelConfig,
+                // Babel 缓存配置
+                cacheDirectory: true, // 启用缓存
+                cacheCompression: false, // 不压缩缓存文件以提升性能
+                cacheIdentifier: `${curEnvConfig.NODE_ENV || 'development'}--${buildMode}-babel`
+              }
             },
             {
               loader: 'ts-loader',
@@ -105,7 +123,11 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
                 compilerOptions: {
                   declaration: curWebpackConfig.createDeclaration || false,
                   outDir: curEnvConfig.assetsRoot || './dist'
-                }
+                },
+                // TypeScript 缓存配置
+                transpileOnly: true, // 只进行转译，不进行类型检查（提升性能）
+                experimentalWatchApi: true // 使用实验性的 watch API（提升性能）
+                // 注意：ts-loader 的缓存由 Webpack 5 的持久化缓存自动处理
               }
             }
           ],
@@ -117,7 +139,13 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
           use: [
             {
               loader: 'babel-loader',
-              options: babelConfig
+              options: {
+                ...babelConfig,
+                // Babel 缓存配置
+                cacheDirectory: true, // 启用缓存
+                cacheCompression: false, // 不压缩缓存文件以提升性能
+                cacheIdentifier: `${curEnvConfig.NODE_ENV || 'development'}--${buildMode}-babel`
+              }
             }
           ],
           // exclude: /node_modules/,
@@ -273,6 +301,9 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
   }
   // 是否开启ESLint
   if (config.settings.enableESLint) {
+    // ESLint 缓存目录
+    const eslintCacheLocation = resolveToCurrentRoot('./node_modules/.cache/eslint');
+
     // ts类型
     webpackConfig.plugins.push(
       new ESLintPlugin({
@@ -280,7 +311,9 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
         extensions: ['ts', 'tsx'],
         // include: curProjectDir, // [resolve('src')],
         // exclude: 'node_modules',
-        cache: true,
+        cache: true, // 启用缓存
+        cacheLocation: path.join(eslintCacheLocation, '.eslintcache-ts'), // 指定缓存位置
+        cacheStrategy: 'metadata', // 使用元数据缓存策略（更快）
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
         overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.ts.js')
@@ -292,7 +325,9 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
         extensions: ['js', 'jsx'],
         // include: curProjectDir, // [resolve('src')],
         // exclude: 'node_modules',
-        cache: true,
+        cache: true, // 启用缓存
+        cacheLocation: path.join(eslintCacheLocation, '.eslintcache-js'), // 指定缓存位置
+        cacheStrategy: 'metadata', // 使用元数据缓存策略（更快）
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
         overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.js')
@@ -304,7 +339,9 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
         extensions: ['vue'],
         // include: curProjectDir, // [resolve('src')],
         // exclude: 'node_modules',
-        cache: true,
+        cache: true, // 启用缓存
+        cacheLocation: path.join(eslintCacheLocation, '.eslintcache-vue'), // 指定缓存位置
+        cacheStrategy: 'metadata', // 使用元数据缓存策略（更快）
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
         overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.vue.js')
@@ -313,6 +350,9 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
   }
   // 是否开启StyleLint: 用于验证scss文件里面的style规范
   if (config.settings.enableStyleLint) {
+    // StyleLint 缓存目录
+    const stylelintCacheLocation = resolveToCurrentRoot('./node_modules/.cache/stylelint');
+
     const vuePagesObj = catchVuePages();
     // 判断项目中是否有vue文件
     if (vuePagesObj && Object.keys(vuePagesObj).length > 0) {
@@ -321,8 +361,8 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
         new StyleLintPlugin({
           files: ['src/**/*.vue'],
           // quiet: true,
-          cache: true,
-          cacheLocation: resolveToCurrentRoot('./node_modules/stylelint/.vue-cache'),
+          cache: true, // 启用缓存
+          cacheLocation: path.join(stylelintCacheLocation, '.stylelintcache-vue'), // 统一缓存位置
           fix: config.settings.enableStyleLintFix,
           configFile: path.resolve(__dirname, '../config/.stylelintrc-vue')
         })
@@ -333,8 +373,8 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
       new StyleLintPlugin({
         files: 'src/**/*.s?(a|c)ss',
         // quiet: true,
-        cache: true,
-        cacheLocation: resolveToCurrentRoot('./node_modules/stylelint/.cache'),
+        cache: true, // 启用缓存
+        cacheLocation: path.join(stylelintCacheLocation, '.stylelintcache-scss'), // 统一缓存位置
         fix: config.settings.enableStyleLintFix,
         configFile: path.resolve(__dirname, '../config/.stylelintrc')
       })

package/src/webpack/webpack.dev.conf.js

@@ -3,27 +3,27 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const utils = require('./loaderUtils');
 const getBaseWebpackConfig = require('./webpack.base.conf'); // 获取webpack基本配置
-// 引入当前项目配置文件
-const projectConfig = require('../config/index');
+const getProjectConfig = require('../config/index'); // 用于获取当前项目配置文件
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 // const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 module.exports = (akfunConfig) => {
-  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  let config = akfunConfig || getProjectConfig(); // 优先使用外部传进来的项目配置
   const curEnvConfig = config.dev || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config, 'dev');
+  const curWebpackConfig = config.webpack || {};
 
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
-  if (config.webpack.template) {
-    curHtmlTemplate = config.webpack.template; // akfun.config.js中的webpack配置
+  if (curWebpackConfig.template) {
+    curHtmlTemplate = curWebpackConfig.template; // akfun.config.js中的webpack配置
   }
 
   let curTarget = ['web', 'es5'];
-  if (config.webpack.target) {
-    curTarget = config.webpack.target; // akfun.config.js中的webpack配置
+  if (curWebpackConfig.target) {
+    curTarget = curWebpackConfig.target; // akfun.config.js中的webpack配置
   }
 
   const webpackDevConfig = merge(baseWebpackConfig, {
@@ -40,12 +40,7 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         envConfig: curEnvConfig, // 当前环境变量
-        sourceMap: curEnvConfig.cssSourceMap,
-        environment: 'prod', // 'dev': 不会将css单独提取出来
-        cssLoaderUrl: config.webpack.cssLoaderUrl,
-        cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
-        cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
-        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
+        webpackConfig: curWebpackConfig, // 当前webpack配置
       })
     },
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值

package/src/webpack/webpack.library.conf.js

@@ -6,8 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const deepMergeConfig = require('../utils/deepMergeConfig');
 
 const utils = require('./loaderUtils');
-// 引入当前项目配置文件
-const projectConfig = require('../config/index');
+const getProjectConfig = require('../config/index'); // 用于获取当前项目配置文件
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
 /**
@@ -16,14 +15,15 @@ const getBaseWebpackConfig = require('./webpack.base.conf');
  * @returns
  */
 module.exports = (akfunConfig) => {
-  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  let config = akfunConfig || getProjectConfig(); // 优先使用外部传进来的项目配置
   const curEnvConfig = config.build2lib || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config, 'build2lib');
+  const curWebpackConfig = config.webpack || {};
 
   let curTarget = ['web', 'es5'];
-  if (config.webpack.target) {
-    curTarget = config.webpack.target; // akfun.config.js中的webpack配置
+  if (curWebpackConfig.target) {
+    curTarget = curWebpackConfig.target; // akfun.config.js中的webpack配置
   }
 
   const webpackLibConfig = merge(baseWebpackConfig, {
@@ -43,12 +43,7 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         envConfig: curEnvConfig, // 当前环境变量
-        sourceMap: curEnvConfig.productionSourceMap,
-        environment: 'prod',
-        cssLoaderUrl: config.webpack.cssLoaderUrl,
-        cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
-        cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
-        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
+        webpackConfig: curWebpackConfig, // 当前webpack配置
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境

package/src/webpack/webpack.prod.conf.js

@@ -11,8 +11,7 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const utils = require('./loaderUtils');
 const { resolve } = require('../utils/pathUtils'); // 统一路径解析
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
-// 引入当前项目配置文件
-const projectConfig = require('../config/index');
+const getProjectConfig = require('../config/index'); // 用于获取当前项目配置文件
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
 /**
@@ -21,19 +20,20 @@ const getBaseWebpackConfig = require('./webpack.base.conf');
  * @returns
  */
 module.exports = (akfunConfig) => {
-  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  let config = akfunConfig || getProjectConfig(); // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config, 'build');
+  const curWebpackConfig = config.webpack || {};
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
-  if (config.webpack.template) {
-    curHtmlTemplate = config.webpack.template; // akfun.config.js中的webpack配置
+  if (curWebpackConfig.template) {
+    curHtmlTemplate = curWebpackConfig.template; // akfun.config.js中的webpack配置
   }
 
   let curTarget = ['web', 'es5'];
-  if (config.webpack.target) {
-    curTarget = config.webpack.target; // akfun.config.js中的webpack配置
+  if (curWebpackConfig.target) {
+    curTarget = curWebpackConfig.target; // akfun.config.js中的webpack配置
   }
 
   const webpackProdConfig = merge(baseWebpackConfig, {
@@ -56,12 +56,7 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         envConfig: curEnvConfig, // 当前环境变量
-        sourceMap: curEnvConfig.productionSourceMap,
-        environment: 'prod',
-        cssLoaderUrl: config.webpack.cssLoaderUrl,
-        cssLoaderUrlDir: config.webpack.cssLoaderUrlDir,
-        cssLoaderOption: config.webpack.cssLoaderOption, // 用于自定义css-loader配置项（优先级最高）
-        postCssLoaderOption: config.webpack.postCssLoaderOption // 用于自定义postcss-loader配置项（优先级最高）
+        webpackConfig: curWebpackConfig, // 当前webpack配置
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境