akfun 2.0.3 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -44,124 +44,123 @@
     "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": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@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/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.1",
-    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/polyfill": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/register": "^7.10.1",
-    "@mapbox/stylelint-processor-arbitrary-tags": "^0.3.0",
-    "@rollup/plugin-alias": "^3.1.1",
-    "@rollup/plugin-babel": "^5.2.0",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-image": "^2.0.5",
+    "@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": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^3.9.0",
-    "@typescript-eslint/parser": "^3.9.0",
-    "@vue/compiler-sfc": "^3.0.0-rc.10",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "autoprefixer": "^9.8.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-import": "^1.13.0",
-    "cache-loader": "^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",
-    "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",
-    "cssnano": "^4.1.10",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.6.0",
+    "cssnano": "^5.0.16",
     "deepmerge": "^4.2.2",
-    "del": "^3.0.0",
+    "del": "^6.0.0",
     "es6-promise-polyfill": "^1.2.0",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-prettier": "^7.2.0",
+    "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.12.1",
-    "eslint-loader": "^4.0.2",
-    "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",
+    "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.1",
-    "figlet": "^1.2.0",
-    "file-loader": "^6.0.0",
-    "friendly-errors-webpack-plugin": "^1.7.0",
-    "git-clone": "^0.1.0",
-    "glob": "^7.1.2",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^4.3.0",
-    "http-proxy-middleware": "^1.0.4",
-    "inquirer": "^7.3.3",
-    "mini-css-extract-plugin": "^0.9.0",
+    "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",
+    "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",
-    "node-sass": "^4.14.1",
-    "opn": "^6.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "sass": "^1.49.7",
+    "open": "^8.4.0",
     "ora": "^4.0.4",
     "params-replace-loader": "^1.1.6",
-    "portfinder": "^1.0.26",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.2.3",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-simple-vars": "^5.0.2",
+    "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",
-    "qs": "^6.9.4",
+    "qs": "^6.10.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.26.5",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-vue": "^6.0.0-beta.10",
-    "sass-loader": "^8.0.2",
-    "sass-resources-loader": "^2.0.3",
-    "semver": "^7.3.2",
-    "shelljs": "^0.8.4",
-    "string-replace-loader": "^2.3.0",
-    "style-loader": "^1.2.1",
-    "stylelint": "^13.6.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-webpack-plugin": "^2.0.0",
-    "ts-import-plugin": "^1.6.5",
-    "ts-loader": "^8.0.14",
-    "typescript": "^3.9.7",
-    "url-loader": "^4.1.0",
-    "vue-eslint-parser": "^7.1.0",
-    "vue-loader": "^15.9.2",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^5.65.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.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",
+    "url-loader": "^4.1.1",
+    "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": "^12.0.2"
+    "yargs": "^17.3.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^9.1.1",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.9",
-    "prettier": "^2.0.5"
+    "@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/config/.eslintrc.js

@@ -1,12 +1,13 @@
-const getCurWebpackConfig = require('../utils/getCurWebpackConfig.js'); // 用于获取当前webpack配置的方法
+const getCurWebpackConfig = require('../utils/getCurWebpackConfig'); // 用于获取当前webpack配置的方法
 const curWebpackBaseConfPath = getCurWebpackConfig('base');
 
 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是特征的意思，这里用于指定要使用其他那些语言对象

package/src/config/.eslintrc.ts.js

@@ -1,4 +1,4 @@
-const getCurWebpackConfig = require('../utils/getCurWebpackConfig.js'); // 用于获取当前webpack配置的方法
+const getCurWebpackConfig = require('../utils/getCurWebpackConfig'); // 用于获取当前webpack配置的方法
 const curWebpackBaseConfPath = getCurWebpackConfig('base');
 
 module.exports = {
@@ -6,8 +6,9 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
   parserOptions: {
-    parser: 'babel-eslint', // babel-eslint解析器是对babel解析器的包装使其与ESLint解析
-    ecmaVersion: 6,
+    parser: '@babel/eslint-parser', // babel-eslint解析器是对babel解析器的包装使其与ESLint解析
+    ecmaVersion: 8,
+    requireConfigFile: false,
     sourceType: 'module', // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量
     ecmaFeatures: {
       // Features是特征的意思，这里用于指定要使用其他那些语言对象
@@ -83,8 +84,5 @@ module.exports = {
     'object-curly-newline': 0, // 该规则在对象文字括号或销毁分配中强制使用一致的换行符
     'operator-linebreak': [0, 'before'], // 换行时运算符在行尾还是行首
     'max-len': ['warn', { code: 150 }]
-  },
-  linterOptions: {
-    exclude: ['node_modules']
   }
 };

package/src/config/.eslintrc.vue.js

@@ -1,4 +1,4 @@
-const getCurWebpackConfig = require('../utils/getCurWebpackConfig.js'); // 用于获取当前webpack配置的方法
+const getCurWebpackConfig = require('../utils/getCurWebpackConfig'); // 用于获取当前webpack配置的方法
 const curWebpackBaseConfPath = getCurWebpackConfig('base');
 
 module.exports = {
@@ -6,8 +6,9 @@ module.exports = {
   parser: 'vue-eslint-parser', // 指定eslint解析器的，解析器必须符合规则
   // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
   parserOptions: {
-    parser: 'babel-eslint', // babel-eslint解析器是对babel解析器的包装使其与ESLint解析
-    ecmaVersion: 6,
+    parser: '@babel/eslint-parser', // babel-eslint解析器是对babel解析器的包装使其与ESLint解析
+    ecmaVersion: 8,
+    requireConfigFile: false,
     sourceType: 'module', // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量
     ecmaFeatures: {
       // Features是特征的意思，这里用于指定要使用其他那些语言对象

package/src/config/postcss.config.js

@@ -1,16 +1,18 @@
 // https://www.npmjs.com/package/autoprefixer
 
 module.exports = {
-  plugins: [
-    require('autoprefixer')({
-      overrideBrowserslist: [
-        '> 1%',
-        'last 2 versions',
-        'not ie <= 8',
-        'iOS >= 8',
-        'Firefox >= 20',
-        'Android > 4.4'
-      ]
-    })
-  ]
+  postcssOptions: {
+    plugins: [
+      require('autoprefixer')({
+        overrideBrowserslist: [
+          '> 1%',
+          'last 2 versions',
+          'not ie <= 8',
+          'iOS >= 8',
+          'Firefox >= 20',
+          'Android > 4.4'
+        ]
+      })
+    ]
+  }
 };

package/src/dev-server.js

@@ -1,4 +1,4 @@
-const opn = require('opn');
+const open = require('open');
 const ora = require('ora');
 const path = require('path');
 const express = require('express');
@@ -11,7 +11,7 @@ const projectConfig = require('./config/index');
 const defaultConfig = require('./config/default.config');
 const getDevWebpackConfig = require('./webpack/webpack.dev.conf');
 const deepMergeConfig = require('./utils/deepMergeConfig');
-const {curConsoleTag } = require("./utils/akfunParams");
+const { curConsoleTag } = require('./utils/akfunParams');
 
 // 构建脚本：一般用于构建开发环境的代码（包含热更新、接口代理等功能）
 module.exports = function (akfunConfig, _consoleTag) {
@@ -43,16 +43,26 @@ module.exports = function (akfunConfig, _consoleTag) {
 
   // 使用 express 启动一个服务
   const app = express();
+
   // 获取开发环境的webpack基本配置
   const webpackConfig = getDevWebpackConfig(config);
+
+  // serve pure public assets
+  // 拼接 public 文件夹的静态资源路径
+  const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
+  app.use(staticPath, express.static(resolve('public')));
+
   const compiler = webpack(webpackConfig); // 启动 webpack 进行编译
 
   // 启动 webpack-dev-middleware，将编译后的文件暂存到内存中
   const devMiddleware = require('webpack-dev-middleware')(compiler, {
     publicPath: webpackConfig.output.publicPath,
-    quiet: true
+    stats: true
   });
 
+  // serve webpack bundle output
+  app.use(devMiddleware);
+
   // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
   const hotMiddleware = require('webpack-hot-middleware')(compiler, {
     log: false,
@@ -83,15 +93,6 @@ module.exports = function (akfunConfig, _consoleTag) {
   // handle fallback for HTML5 history API
   app.use(require('connect-history-api-fallback')());
 
-  // serve webpack bundle output
-  app.use(devMiddleware);
-
-  // serve pure public assets
-  // 拼接 public 文件夹的静态资源路径
-  const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory);
-
-  app.use(staticPath, express.static(resolve('public')));
-
   let _resolve;
   let _reject;
   const readyPromise = new Promise((resolve, reject) => {
@@ -112,11 +113,23 @@ module.exports = function (akfunConfig, _consoleTag) {
       }
       process.env.PORT = port;
       const uri = `http://${config.dev.hostname}:${port}`;
+
       console.log(`> Listening at ${uri}\n`);
       // 如果是开发环境，自动打开浏览器并跳到项目首页
-      if (autoOpenBrowser && process.NODE_ENV === 'development') {
+      if (autoOpenBrowser) {
         spinner.succeed(`${consoleTag}调试模式已开启！`);
-        opn(uri);
+        // 打印当前环境中的首个html和css地址
+        const projPath = `${uri}${webpackConfig.output.publicPath}`;
+        let entryConfig = webpackConfig.entry || {}; // 获取构建入口配置
+        const entryFiles = (entryConfig && Object.keys(entryConfig)) || [];
+        if (entryFiles.length > 0) {
+          // 获取第一个入口文件
+          const filename = entryFiles[0];
+          console.info(
+            `当前运行脚本:\n ${projPath}${filename}.js\n当前运行样式[可能不存在]:\n${projPath}${filename}.css`
+          );
+          open(`${projPath}${filename}.html`, { wait: true });
+        }
       }
       server = app.listen(port);
       _resolve();

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

@@ -22,7 +22,7 @@ module.exports = {
     },
     resolve: {
       // webpack的resolve配置
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', 'json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
       alias: {
         '@': resolve('src'),
         $components: resolve('src/components'),

package/src/webpack/loaderUtils.js

@@ -36,6 +36,7 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
+      url: false, // enables/disables url()/image-set() functions handling
       sourceMap: options.sourceMap
     }
   };
@@ -56,7 +57,7 @@ exports.cssLoaders = function (options) {
         {
           loader: MiniCssExtractPlugin.loader,
           options: {
-            esModule: true
+            esModule: false // enable a CommonJS syntax using
           }
         },
         cssLoader,

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

@@ -5,8 +5,9 @@ const webpack = require('webpack');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const nodeExternals = require('webpack-node-externals');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+// const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 const utils = require('./loaderUtils');
 const vueLoaderConfig = require('./vue-loader.conf');
 const { resolve, resolveToCurrentRoot } = require('../utils/pathUtils');
@@ -38,6 +39,11 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
   // 获取当前项目目录
   const curProjectDir = getProjectDir(curWebpackConfig.projectDir);
   const webpackConfig = {
+    stats: {
+      // cachedModules: false,
+      // providedExports: true,
+      // warnings: false
+    },
     entry: curWebpackConfig.entry,
     // target: 'web', // <=== 默认为 'web'，可省略
     target: ['web', 'es5'], // 使用共同的特性子集
@@ -139,18 +145,22 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
             name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
           }
         },
-        {
-          test: /\.(html)$/,
-          use: {
-            loader: 'html-loader'
-          }
-        },
         {
           test: /\.(js|ts|tsx|jsx|vue|css|html)$/,
           loader: 'params-replace-loader',
           include: curProjectDir, // [resolve('src')],
           exclude: [/node_modules/, resolve('src/mock/data')], // 排除不需要进行校验的文件夹
           options: config.envParams
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: 'html-loader',
+            options: {
+              minimize: true,
+              sources: false // Enables/Disables sources handling
+            }
+          }
         }
       ]
     },
@@ -161,7 +171,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
       }),
       // 请确保引入这个插件来施展魔法
       new VueLoaderPlugin(),
-      new FriendlyErrorsPlugin(),
+      // new FriendlyErrorsPlugin(),
       new ProgressBarPlugin()
     ]
   };
@@ -213,47 +223,42 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
   // 是否开启ESLint
   if (config.settings.enableESLint) {
     // ts类型
-    webpackConfig.module.rules.push({
-      test: /\.tsx?$/,
-      loader: 'eslint-loader',
-      enforce: 'pre',
-      include: curProjectDir, // [resolve('src')],
-      exclude: /node_modules/,
-      options: {
+    webpackConfig.plugins.push(
+      new ESLintPlugin({
+        // context: resolve('src'),
+        extensions: ['ts', 'tsx'],
+        // include: curProjectDir, // [resolve('src')],
+        exclude: 'node_modules',
         cache: true,
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
-        configFile: path.resolve(__dirname, '../config/.eslintrc.ts.js')
-      }
-    });
+        overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.ts.js')
+      })
+    );
     // 通用js类型
-    webpackConfig.module.rules.push({
-      test: /\.jsx?$/,
-      loader: 'eslint-loader',
-      enforce: 'pre',
-      include: curProjectDir, // [resolve('src')],
-      exclude: /node_modules/,
-      options: {
-        cache: true, // the cache is written to the ./node_modules/.cache/eslint-loader director
+    webpackConfig.plugins.push(
+      new ESLintPlugin({
+        extensions: ['js', 'jsx'],
+        // include: curProjectDir, // [resolve('src')],
+        exclude: 'node_modules',
+        cache: true,
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
-        configFile: path.resolve(__dirname, '../config/.eslintrc.js')
-      }
-    });
+        overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.js')
+      })
+    );
     // vue单文件类型
-    webpackConfig.module.rules.push({
-      test: /\.vue$/,
-      loader: 'eslint-loader',
-      enforce: 'pre',
-      include: curProjectDir, // [resolve('src')],
-      exclude: /node_modules/,
-      options: {
+    webpackConfig.plugins.push(
+      new ESLintPlugin({
+        extensions: ['vue'],
+        // include: curProjectDir, // [resolve('src')],
+        exclude: 'node_modules',
         cache: true,
         fix: config.settings.enableESLintFix || false,
         formatter: require('eslint-friendly-formatter'),
-        configFile: path.resolve(__dirname, '../config/.eslintrc.vue.js')
-      }
-    });
+        overrideConfigFile: path.resolve(__dirname, '../config/.eslintrc.vue.js')
+      })
+    );
   }
   // 是否开启StyleLint: 用于验证scss文件里面的style规范
   if (config.settings.enableStyleLint) {
@@ -264,7 +269,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
       webpackConfig.plugins.push(
         new StyleLintPlugin({
           files: ['src/**/*.vue'],
-          quiet: true,
+          // quiet: true,
           cache: true,
           cacheLocation: resolveToCurrentRoot('./node_modules/stylelint/.vue-cache'),
           fix: config.settings.enableStyleLintFix,
@@ -276,7 +281,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
     webpackConfig.plugins.push(
       new StyleLintPlugin({
         files: 'src/**/*.s?(a|c)ss',
-        quiet: true,
+        // quiet: true,
         cache: true,
         cacheLocation: resolveToCurrentRoot('./node_modules/stylelint/.cache'),
         fix: config.settings.enableStyleLintFix,

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

@@ -1,11 +1,13 @@
 const webpack = require('webpack');
 const path = require('path');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
 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');
 
 module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
@@ -27,18 +29,25 @@ module.exports = (akfunConfig) => {
     module: {
       rules: utils.styleLoaders({
         sourceMap: curEnvConfig.cssSourceMap,
-        environment: 'dev'
+        environment: 'prod' // 'dev': 不会将css单独提取出来
       })
     },
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
     devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'eval-source-map' : 'eval', // 开发环境
     optimization: {
       chunkIds: 'named', // named 对调试更友好的可读的 id。
-      emitOnErrors: true
+      emitOnErrors: true,
+      minimize: false
     },
     plugins: [
       // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-      new webpack.HotModuleReplacementPlugin()
+      new webpack.HotModuleReplacementPlugin(),
+      new MiniCssExtractPlugin({
+        // filename: utils.assetsPath('index.css'),
+        filename: '[name].css',
+        chunkFilename: '[name].css',
+        ignoreOrder: false
+      })
     ]
   });
 

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

@@ -1,5 +1,5 @@
-const merge = require('webpack-merge');
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+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 CompressionWebpackPlugin = require('compression-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -19,7 +19,7 @@ module.exports = (akfunConfig) => {
     mode: curEnvConfig.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
     output: {
       path: curEnvConfig.assetsRoot, // 输出文件的存放在本地的目录
-      filename: 'index.umd.js',
+      filename: '[name].umd.js',
       publicPath: '',
       library: {
         type: 'umd', // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
@@ -41,7 +41,8 @@ module.exports = (akfunConfig) => {
        *  deterministic 在不同的编译中不变的短数字 id。有益于长期缓存。在生产模式中会默认开启。
        */
       chunkIds: 'named',
-      emitOnErrors: true
+      emitOnErrors: true,
+      minimize: true
     },
     plugins: [
       new MiniCssExtractPlugin({
@@ -49,11 +50,6 @@ module.exports = (akfunConfig) => {
         filename: '[name].css',
         chunkFilename: '[name].css',
         ignoreOrder: false
-      }),
-      new OptimizeCSSPlugin({
-        cssProcessorOptions: {
-          safe: true
-        }
       })
     ]
   });

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

@@ -1,9 +1,9 @@
 const fs = require('fs');
 const path = require('path');
-const merge = require('webpack-merge');
+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 OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 替换extract-text-webpack-plugin
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
@@ -70,13 +70,14 @@ module.exports = (akfunConfig) => {
             reuseExistingChunk: true
           }
         }
-      }
+      },
+      minimize: true
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: utils.assetsPath('css/[name].[contenthash:8].css'),
         ignoreOrder: false // Enable to remove warnings about conflicting order
-      }),
+      })
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
       /**
@@ -87,11 +88,6 @@ module.exports = (akfunConfig) => {
        * cssProcessorOptions：传递给cssProcessor的选项，默认为 {}
        * canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true
        */
-      new OptimizeCSSPlugin({
-        cssProcessorOptions: {
-          safe: true
-        }
-      })
     ]
   });
 

package/src/initData/config/.gitignore

@@ -1,47 +0,0 @@
-# Numerous always-ignore extensions
-*.bak
-*.patch
-*.diff
-*.err
-
-# temp file for git conflict merging
-*.orig
-*.log
-*.rej
-*.swo
-*.swp
-*.zip
-*.vi
-*~
-*.sass-cache
-*.tmp.html
-*.dump
-
-# OS or Editor folders
-.DS_Store
-._*
-.cache
-.project
-.settings
-.tmproj
-*.esproj
-*.sublime-project
-*.sublime-workspace
-nbproject
-thumbs.db
-*.iml
-.vscode/
-
-# Folders to ignore
-.hg
-.svn
-.CVS
-.idea
-node_modules/
-jscoverage_lib/
-.svn
-
-# log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*