akfun 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -112,6 +112,7 @@
     "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",

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/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/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; // 默认使用执行命令目录下的配置数据

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;
 
@@ -42,7 +42,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');
@@ -71,7 +71,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({