akfun 3.0.2 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "3.0.2",
+  "version": "3.0.7",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -105,13 +105,14 @@
     "express": "^4.17.2",
     "figlet": "^1.5.2",
     "file-loader": "^6.2.0",
-    "git-clone": "^0.2.0",
+    "git-clone": "0.1.0",
     "glob": "^7.2.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^2.0.2",
     "inquirer": "^8.2.0",
     "mini-css-extract-plugin": "^2.5.3",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "monaco-editor-webpack-plugin": "6.0.0",
     "sass": "^1.49.7",
     "open": "^8.4.0",
@@ -153,7 +154,7 @@
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
-    "yargs": "^17.3.1"
+    "yargs": "^12.0.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",

package/src/initData/akfun-package-1.x.json

@@ -58,7 +58,6 @@
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.2",
-    "url-loader": "^4.1.0",
     "vue-loader": "^15.9.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
@@ -73,7 +72,6 @@
     "http-proxy-middleware": "^1.0.4",
     "autoprefixer": "^9.8.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "file-loader": "^6.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "params-replace-loader": "^1.1.6",
     "progress-bar-webpack-plugin": "^2.1.0",

package/src/initData/akfun-package.json

@@ -98,7 +98,6 @@
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.17.2",
     "figlet": "^1.5.2",
-    "file-loader": "^6.2.0",
     "git-clone": "^0.2.0",
     "glob": "^7.2.0",
     "html-loader": "^3.1.0",
@@ -135,7 +134,6 @@
     "ts-import-plugin": "^2.0.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5",
-    "url-loader": "^4.1.1",
     "vue-eslint-parser": "^8.2.0",
     "vue-loader": "^15.9.8",
     "vue-style-loader": "^4.1.3",

package/src/utils/gitClone.js

@@ -1,14 +1,14 @@
 const path = require('path');
 const ora = require('ora');
-const gitclone = require('git-clone');
+const gitClone = require('git-clone');
 const rm = require('rimraf').sync;
 const { resolveToCurrentRoot } = require('../utils/pathUtils');
-const {curConsoleTag} = require("./akfunParams");
+const { curConsoleTag } = require('./akfunParams');
 
 function _gitClone(gitUrl, dir, callback, _consoleTag) {
   const consoleTag = _consoleTag || curConsoleTag;
   const spinner = ora(`${consoleTag}正在加载项目模板...`).start();
-  gitclone(
+  gitClone(
     gitUrl,
     resolveToCurrentRoot(dir),
     {
@@ -20,7 +20,7 @@ function _gitClone(gitUrl, dir, callback, _consoleTag) {
         spinner.succeed(`${consoleTag}项目模板加载完成！`);
         callback();
       } else {
-        console.log(err);
+        spinner.fail(err);
         callback(err);
       }
     }

package/src/webpack/loaderUtils.js

@@ -36,7 +36,20 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
-      url: false, // enables/disables url()/image-set() functions handling
+      // url: false, // enables/disables url()/image-set() functions handling
+      url: {
+        filter: (url, resourcePath) => {
+          // 自定义配置优先
+          if (options.cssLoaderUrl !== undefined) {
+            return options.cssLoaderUrl;
+          }
+          // Don't handle `node_modules` urls
+          if (resourcePath.includes('node_modules')) {
+            return true;
+          }
+          return false;
+        }
+      },
       sourceMap: options.sourceMap
     }
   };

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

@@ -5,6 +5,7 @@ const isProduction = process.NODE_ENV === 'production';
 
 module.exports = {
   loaders: utils.cssLoaders({
+    cssLoaderUrl: config.webpack.cssLoaderUrl, // 用于自定义css-loader配置项[url]
     sourceMap: isProduction // 生产环境sourceMap是true
       ? config.build.productionSourceMap
       : config.dev.cssSourceMap,

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

@@ -121,28 +121,43 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
             url-loader 功能类似于 file-loader，在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
            */
           test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 2 * 1024 //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
+            }
+          },
+          generator: {
+            // filename，和output中设置assetModuleFilename一样，将资源打包至img文件夹
+            filename: utils.assetsPath('img/[name].[hash:7][ext]') //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
           }
         },
         {
           // 视频音频资源
           test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 2 * 1024 //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
+            }
+          },
+          generator: {
+            // filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
+            filename: utils.assetsPath('media/[name].[hash:7][ext]') //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
           }
         },
         {
           // 字体资源
           test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: 2 * 1024 //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
+            }
+          },
+          generator: {
+            // filename，和output中设置assetModuleFilename一样，将资源打包至fonts目录中
+            filename: utils.assetsPath('fonts/[name].[hash:7][ext]') //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
           }
         },
         {

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

@@ -7,7 +7,7 @@ const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-// const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+// const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
@@ -29,7 +29,8 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         sourceMap: curEnvConfig.cssSourceMap,
-        environment: 'prod' // 'dev': 不会将css单独提取出来
+        environment: 'prod', // 'dev': 不会将css单独提取出来
+        cssLoaderUrl: config.webpack.cssLoaderUrl
       })
     },
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值

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

@@ -1,6 +1,6 @@
 const { merge } = require('webpack-merge');
-// const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换extract-text-webpack-plugin
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -31,7 +31,8 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         sourceMap: curEnvConfig.productionSourceMap,
-        environment: 'prod'
+        environment: 'prod',
+        cssLoaderUrl: config.webpack.cssLoaderUrl
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
@@ -42,7 +43,12 @@ module.exports = (akfunConfig) => {
        */
       chunkIds: 'named',
       emitOnErrors: true,
-      minimize: true
+      minimize: true,
+      minimizer: [
+        // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
+        `...`,
+        new CssMinimizerPlugin()
+      ]
     },
     plugins: [
       new MiniCssExtractPlugin({

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

@@ -3,8 +3,8 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 // const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 不支持webpack4.0
-// const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换extract-text-webpack-plugin
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
@@ -46,7 +46,8 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         sourceMap: curEnvConfig.productionSourceMap,
-        environment: 'prod'
+        environment: 'prod',
+        cssLoaderUrl: config.webpack.cssLoaderUrl
       })
     },
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
@@ -71,7 +72,12 @@ module.exports = (akfunConfig) => {
           }
         }
       },
-      minimize: true
+      minimize: true,
+      minimizer: [
+        // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
+        `...`,
+        new CssMinimizerPlugin()
+      ]
     },
     plugins: [
       new MiniCssExtractPlugin({