akfun 3.0.0 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "3.0.0",
+  "version": "3.0.5",
   "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",
@@ -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

@@ -0,0 +1,138 @@
+{
+  "name": "akfun",
+  "version": "1.2.12",
+  "description": "前端脚手架：支持Vue技术站和react技术栈",
+  "keywords": ["前端工程", "前端脚手架", "webpack"],
+  "author": "ldan@wibetter",
+  "license": "MIT",
+  "bin": {
+    "akfun": "./bin/akfun.js"
+  },
+  "main": "module/main.js",
+  "scripts": {
+    "akfun": "akfun",
+    "lint": "eslint --ext .js,.vue src",
+    "lintFix": "eslint --ext .js,.vue src --fix",
+    "format": "prettier --write \"src/**/**/*.{js,vue,tsx,ts,scss,json}\""
+  },
+  "files": ["bin/*", "module/*", "src/*"],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/**/*.{js,vue,tsx,ts,scss,json}": ["eslint --ext --fix"],
+    "src/**/**/*.{js,vue,tsx,ts,scss,json}": ["prettier --write"]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+http://git@github.com:wibetter/akfun.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wibetter/akfun/issues"
+  },
+  "peerDependencies": {
+    "eslint": "^6.2.0 || ^7.0.0"
+  },
+  "dependencies": {
+    "del": "^3.0.0",
+    "figlet": "^1.2.0",
+    "glob": "^7.1.2",
+    "yargs": "^12.0.2",
+    "chalk": "^4.0.0",
+    "opn": "^6.0.0",
+    "ora": "^4.0.4",
+    "qs": "^6.9.4",
+    "rimraf": "^3.0.2",
+    "express": "^4.17.1",
+    "node-sass": "^4.14.1",
+    "portfinder": "^1.0.26",
+    "semver": "^7.3.2",
+    "shelljs": "^0.8.4",
+    "git-clone": "^0.1.0",
+    "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-middleware": "^3.7.2",
+    "webpack-hot-middleware": "^2.25.0",
+    "webpack-merge": "^4.2.2",
+    "vue-loader": "^15.9.2",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.11",
+    "cache-loader": "^4.1.0",
+    "compression-webpack-plugin": "^4.0.0",
+    "connect-history-api-fallback": "^1.6.0",
+    "copy-webpack-plugin": "^6.0.2",
+    "css-loader": "^3.5.3",
+    "es6-promise-polyfill": "^1.2.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "http-proxy-middleware": "^1.0.4",
+    "autoprefixer": "^9.8.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "params-replace-loader": "^1.1.6",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "sass-loader": "^8.0.2",
+    "sass-resources-loader": "^2.0.3",
+    "string-replace-loader": "^2.3.0",
+    "style-loader": "^1.2.1",
+    "eventsource-polyfill": "^0.9.6",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "babel-loader": "^8.1.0",
+    "@babel/cli": "^7.10.1",
+    "@babel/core": "^7.10.2",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-proposal-decorators": "^7.10.1",
+    "@babel/plugin-proposal-export-namespace-from": "^7.10.1",
+    "@babel/plugin-proposal-function-sent": "^7.10.1",
+    "@babel/plugin-proposal-json-strings": "^7.10.1",
+    "@babel/plugin-proposal-numeric-separator": "^7.10.1",
+    "@babel/plugin-proposal-throw-expressions": "^7.10.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/register": "^7.10.1",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "eslint-loader": "^4.0.2",
+    "eslint": "^7.2.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-import": "^2.21.1",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-eslint-parser": "^7.1.0",
+    "stylelint": "^13.6.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-webpack-plugin": "^2.0.0",
+    "@mapbox/stylelint-processor-arbitrary-tags": "^0.3.0"
+  },
+  "devDependencies": {
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.9",
+    "prettier": "^2.0.5",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^9.1.1"
+  },
+  "engines": {
+    "node": ">= 10.13.0",
+    "npm": ">= 6.4.1"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8",
+    "iOS >= 8",
+    "Firefox >= 20",
+    "Android > 4.4"
+  ]
+}

package/src/initData/akfun-package.json

@@ -1,9 +1,16 @@
 {
   "name": "akfun",
-  "version": "1.2.12",
-  "description": "前端脚手架：支持Vue技术站和react技术栈",
-  "keywords": ["前端工程", "前端脚手架", "webpack"],
-  "author": "ldan@wibetter",
+  "version": "3.0.0",
+  "description": "前端脚手架：支持Vue技术栈和react技术栈",
+  "keywords": [
+    "前端工程",
+    "前端脚手架",
+    "webpack",
+    "react项目脚手架",
+    "vue项目脚手架",
+    "lib库构建工具"
+  ],
+  "author": "wibetter",
   "license": "MIT",
   "bin": {
     "akfun": "./bin/akfun.js"
@@ -11,8 +18,6 @@
   "main": "module/main.js",
   "scripts": {
     "akfun": "akfun",
-    "lint": "eslint --ext .js,.vue src",
-    "lintFix": "eslint --ext .js,.vue src --fix",
     "format": "prettier --write \"src/**/**/*.{js,vue,tsx,ts,scss,json}\""
   },
   "files": ["bin/*", "module/*", "src/*"],
@@ -23,8 +28,7 @@
     }
   },
   "lint-staged": {
-    "src/**/**/*.{js,vue,tsx,ts,scss,json}": ["eslint --ext --fix"],
-    "src/**/**/*.{js,vue,tsx,ts,scss,json}": ["prettier --write"]
+    "src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}": ["prettier --write"]
   },
   "repository": {
     "type": "git",
@@ -34,96 +38,121 @@
     "url": "https://github.com/wibetter/akfun/issues"
   },
   "peerDependencies": {
-    "eslint": "^6.2.0 || ^7.0.0"
+    "eslint": "^8.8.0",
+    "chalk": "^4.0.0",
+    "ora": "^4.0.4"
   },
   "dependencies": {
-    "del": "^3.0.0",
-    "figlet": "^1.2.0",
-    "glob": "^7.1.2",
-    "yargs": "^12.0.2",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
+    "@babel/plugin-proposal-function-sent": "^7.16.7",
+    "@babel/plugin-proposal-json-strings": "^7.16.7",
+    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
+    "@babel/plugin-proposal-throw-expressions": "^7.16.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/polyfill": "^7.10.1",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/register": "^7.17.0",
+    "@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "@vue/compiler-sfc": "^3.2.29",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "autoprefixer": "^10.4.2",
+    "@babel/eslint-parser": "^7.17.0",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-import": "^1.13.3",
     "chalk": "^4.0.0",
-    "opn": "^6.0.0",
-    "ora": "^4.0.4",
-    "qs": "^6.9.4",
-    "rimraf": "^3.0.2",
-    "express": "^4.17.1",
-    "node-sass": "^4.14.1",
-    "portfinder": "^1.0.26",
-    "semver": "^7.3.2",
-    "shelljs": "^0.8.4",
-    "git-clone": "^0.1.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.11",
-    "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",
-    "cache-loader": "^4.1.0",
-    "compression-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^9.2.0",
     "connect-history-api-fallback": "^1.6.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "css-loader": "^3.5.3",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.6.0",
+    "cssnano": "^5.0.16",
+    "deepmerge": "^4.2.2",
+    "del": "^6.0.0",
     "es6-promise-polyfill": "^1.2.0",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^4.3.0",
-    "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",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-webpack-plugin": "^3.1.1",
+    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-vue": "^8.4.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.17.2",
+    "figlet": "^1.5.2",
+    "git-clone": "^0.2.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",
+    "monaco-editor-webpack-plugin": "6.0.0",
+    "sass": "^1.49.7",
+    "open": "^8.4.0",
+    "ora": "^4.0.4",
     "params-replace-loader": "^1.1.6",
+    "portfinder": "^1.0.28",
+    "postcss-loader": "^6.2.1",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.3.1",
+    "postcss-simple-vars": "^6.0.3",
     "progress-bar-webpack-plugin": "^2.1.0",
-    "sass-loader": "^8.0.2",
-    "sass-resources-loader": "^2.0.3",
-    "string-replace-loader": "^2.3.0",
-    "style-loader": "^1.2.1",
-    "eventsource-polyfill": "^0.9.6",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "babel-loader": "^8.1.0",
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@babel/polyfill": "^7.10.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-decorators": "^7.10.1",
-    "@babel/plugin-proposal-export-namespace-from": "^7.10.1",
-    "@babel/plugin-proposal-function-sent": "^7.10.1",
-    "@babel/plugin-proposal-json-strings": "^7.10.1",
-    "@babel/plugin-proposal-numeric-separator": "^7.10.1",
-    "@babel/plugin-proposal-throw-expressions": "^7.10.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.1",
-    "@babel/plugin-transform-runtime": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/register": "^7.10.1",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-import": "^1.13.0",
-    "eslint-loader": "^4.0.2",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-html": "^6.0.2",
-    "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-eslint-parser": "^7.1.0",
-    "stylelint": "^13.6.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-webpack-plugin": "^2.0.0",
-    "@mapbox/stylelint-processor-arbitrary-tags": "^0.3.0"
+    "qs": "^6.10.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.67.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass-loader": "^12.4.0",
+    "sass-resources-loader": "^2.2.4",
+    "semver": "^7.3.5",
+    "shelljs": "^0.8.5",
+    "string-replace-loader": "^3.1.0",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-webpack-plugin": "^3.1.1",
+    "ts-import-plugin": "^2.0.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "vue-eslint-parser": "^8.2.0",
+    "vue-loader": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.68.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-middleware": "^5.3.1",
+    "webpack-hot-middleware": "^2.25.1",
+    "webpack-merge": "^5.8.0",
+    "webpack-node-externals": "^3.0.0",
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.9",
-    "prettier": "^2.0.5",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^9.1.1"
+    "@commitlint/cli": "^16.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^12.3.3",
+    "prettier": "^2.5.1"
   },
   "engines": {
     "node": ">= 10.13.0",

package/src/initData/config/.eslintrc.js

@@ -3,10 +3,11 @@ const { curWebpackBaseConfPath } = require('akfun');
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint', // 指定eslint解析器的，解析器必须符合规则
+  parser: '@babel/eslint-parser', // 指定eslint解析器的，解析器必须符合规则
   // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
   parserOptions: {
-    ecmaVersion: 6,
+    ecmaVersion: 8,
+    requireConfigFile: false,
     sourceType: 'module', // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量
     ecmaFeatures: {
       // Features是特征的意思，这里用于指定要使用其他那些语言对象
@@ -23,11 +24,11 @@ module.exports = {
   // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
   extends: [
     'airbnb-base', // eslint-config-airbnb-base
-    '@vue/typescript' // @vue/eslint-config-typescript: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin
+    'prettier' // eslint-config-prettier
   ],
   // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
   // required to lint *.src files
-  plugins: ['@typescript-eslint', 'prettier', 'html', 'react', 'vue'],
+  plugins: ['prettier', 'html', 'react'],
   // check if imports actually resolve
   settings: {
     'import/resolver': {
@@ -52,8 +53,8 @@ module.exports = {
         vue: 'never'
       }
     ],
-    'react/jsx-uses-react': 'error',
-    'react/jsx-uses-vars': 'error',
+    'react/jsx-uses-react': 'error', // 防止在JSX中使用的变量被错误地标记为未使用
+    'react/jsx-uses-vars': 'error', // 防止在JSX中使用的变量被错误地标记为未使用
     'import/first': 0,
     'arrow-parens': 0,
     'no-underscore-dangle': 'off',
@@ -80,6 +81,7 @@ module.exports = {
     'no-lonely-if': 0, // 禁止else语句内只有if语句
     'no-eval': 1, // JavaScript的eval()功能具有潜在的危险，并且经常被滥用
     'object-curly-newline': 0, // 该规则在对象文字括号或销毁分配中强制使用一致的换行符
-    'operator-linebreak': [0, 'before'] // 换行时运算符在行尾还是行首
+    'operator-linebreak': [0, 'before'], // 换行时运算符在行尾还是行首
+    'max-len': ['warn', { code: 150 }]
   }
 };

package/src/initData/config/akfun.config.js

@@ -12,7 +12,7 @@ module.exports = {
   settings: {
     enableESLint: false, // 调试模式是否开启ESLint，默认关闭ESLint检测代码格式
     enableESLintFix: false, // 是否自动修正代码格式，默认不自动修正
-    enableStyleLint: true, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
     enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
   },
   webpack: {

package/src/initData/template/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "akfun": "^1.0.1",
+    "akfun": "^3.0.1",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
     "husky": "^4.2.5",

package/src/utils/entrys2htmlWebpackPlugin.js

@@ -24,7 +24,7 @@ module.exports = function (entryConfig, curDefaultHtmlTemplate) {
             filename: `${filename}.html`,
             template: curPageTemplate,
             chunks: ['vendor', 'common', filename],
-            inject: true, // 当传递true或body时，所有javascript资源都将放置在body元素的底部。
+            inject: 'body', // 当传递true或body时，所有javascript资源都将放置在body元素的底部。
             minify: false, // mode: 'production'模式下会自定压缩html代码，优先级比minify高
             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
             chunksSortMode: 'auto'

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({