akfun 3.2.5 → 3.2.8-vue3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "3.2.5",
+  "version": "3.2.8-vue3-beta.1",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -44,13 +44,14 @@
     "url": "https://github.com/wibetter/akfun/issues"
   },
   "peerDependencies": {
-    "eslint": "^8.8.0",
     "chalk": "^4.0.0",
+    "eslint": "^8.8.0",
     "ora": "^4.0.4"
   },
   "dependencies": {
     "@babel/cli": "^7.17.0",
     "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^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",
@@ -74,13 +75,11 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.1",
-    "rollup-plugin-node-externals": "^4.0.0",
+    "@svgr/webpack": "^6.2.1",
     "@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",
@@ -88,6 +87,7 @@
     "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.6.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "cssnano": "^5.0.16",
     "deepmerge": "^4.2.2",
     "del": "^6.0.0",
@@ -97,12 +97,12 @@
     "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",
+    "eslint-webpack-plugin": "^3.1.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.17.2",
     "figlet": "^1.5.2",
@@ -114,8 +114,6 @@
     "http-proxy-middleware": "^2.0.2",
     "inquirer": "^8.2.0",
     "mini-css-extract-plugin": "^2.5.3",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "sass": "^1.49.7",
     "open": "^8.4.0",
     "ora": "^4.0.4",
     "params-replace-loader": "^1.1.6",
@@ -128,9 +126,11 @@
     "qs": "^6.10.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.67.0",
+    "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "sass-resources-loader": "^2.2.4",
     "semver": "^7.3.5",
@@ -145,9 +145,9 @@
     "typescript": "^4.5.5",
     "url-loader": "^4.1.1",
     "vue-eslint-parser": "^8.2.0",
-    "vue-loader": "^15.9.8",
+    "vue-loader": "^17.0.0",
     "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.6.14",
+    "@vue/compiler-sfc": "^3.2.37",
     "webpack": "^5.68.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",

package/src/webpack/loaderUtils.js

@@ -107,11 +107,13 @@ exports.cssLoaders = function (options) {
     return loaders;
   }
 
+  const sassOptions = options.sassOptions || {};
+
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    sass: generateLoaders('sass', { indentedSyntax: true, sassOptions }),
+    scss: generateLoaders('sass', { sassOptions }),
     less: generateLoaders('less'),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')

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

@@ -7,6 +7,7 @@ module.exports = {
   loaders: utils.cssLoaders({
     cssLoaderUrl: config.webpack.cssLoaderUrl, // 用于自定义css-loader配置项[url]
     cssLoaderUrlDir: config.webpack.cssLoaderUrlDir, // 用于设置css-loader配置项[url]的生效目录
+    sassOptions: config.webpack.sassOptions, // 用于设置sass-loader配置项
     sourceMap: isProduction // 生产环境sourceMap是true
       ? config.build.productionSourceMap
       : config.dev.cssSourceMap,

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

@@ -3,7 +3,8 @@ const fs = require('fs');
 const webpack = require('webpack');
 // const tsImportPluginFactory = require('ts-import-plugin'); // 按需加载lib库组件代码
 const StyleLintPlugin = require('stylelint-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+// const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue2.0
+const {VueLoaderPlugin} = require('vue-loader'); // vue3.0
 const nodeExternals = require('webpack-node-externals');
 // const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
@@ -122,6 +123,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
            */
           test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
           type: 'asset',
+          issuer: /\.s?css$/,
           parser: {
             dataUrlCondition: {
               maxSize: 2 * 1024 //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
@@ -132,6 +134,11 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
             filename: utils.assetsPath('img/[name].[hash:7][ext]') //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
           }
         },
+        {
+          test: /\.svg$/,
+          issuer: /\.[jt]sx?$/,
+          use: ['@svgr/webpack']
+        },
         {
           // 视频音频资源
           test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
@@ -311,5 +318,11 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     webpackConfig.plugins.push(...curWebpackConfig.plugins);
   }
 
+  // 判断是否有自定义loader
+  if (curWebpackConfig.moduleRules && Array.isArray(curWebpackConfig.moduleRules)) {
+    // 添加自定义自定义loader
+    webpackConfig.module.rules.push(...curWebpackConfig.moduleRules);
+  }
+
   return webpackConfig;
 };