akfun 1.6.10 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "1.6.10",
+  "version": "2.0.1",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -147,9 +147,9 @@
     "vue-loader": "^15.9.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.43.0",
+    "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.2",

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

@@ -1,22 +1,23 @@
 const path = require('path');
+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 nodeExternals = require('webpack-node-externals');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const utils = require('./loaderUtils');
 const vueLoaderConfig = require('./vue-loader.conf');
 const { resolve, resolveToCurrentRoot } = require('../utils/pathUtils');
 const getProjectDir = require('../utils/getProjectDir');
 const catchVuePages = require('../utils/catchVuePages'); // 用于获取当前项目中的vue单文件
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const babelConfig = require('../config/babel.config'); // Babel的配置文件
 const {buildBanner} = require("../utils/akfunParams");
 const getJsEntries = require('../utils/jsEntries');
 const { isArray } = require('../utils/typeof');
-const fs = require('fs');
-
 
 // 生成构建头部信息
 const BannerPack = new webpack.BannerPlugin({
@@ -27,14 +28,20 @@ const BannerPack = new webpack.BannerPlugin({
 /**
  * webpack.base.conf.js
  * 主要用于设置 rules 和 通用插件
+ * _curEnvConfig: 执行环境中的配置，比如：dev、build、build2lib等；
+ * _akfunConfig：完整的配置对象
  */
-module.exports = (_curEnvConfig, _curWebpackConfig) => {
+module.exports = (_curEnvConfig, _akfunConfig) => {
   const curEnvConfig = _curEnvConfig || {}; // 用于接收当前运行环境配置变量
-  const curWebpackConfig = _curWebpackConfig || config.webpack;
+  let config = _akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  const curWebpackConfig = config.webpack;
   // 获取当前项目目录
   const curProjectDir = getProjectDir(curWebpackConfig.projectDir);
   const webpackConfig = {
     entry: curWebpackConfig.entry,
+    // target: 'web', // <=== 默认为 'web'，可省略
+    target: ['web', 'es5'], // 使用共同的特性子集
+    // target: false, // 不使用任何插件
     /*
      内置变量列表：
      id: chunk的唯一标识，从0开始；
@@ -50,11 +57,11 @@ module.exports = (_curEnvConfig, _curWebpackConfig) => {
      * 当webpack试图去加载模块的时候，它默认是查找以 .js 结尾的文件的
      */
     resolve: curWebpackConfig.resolve,
-    externals: config.webpack.ignoreNodeModules
+    externals: curWebpackConfig.ignoreNodeModules
       ? [nodeExternals({
-        allowlist: config.webpack.allowList ? config.webpack.allowList : []
-      })].concat(config.webpack.externals)
-      : config.webpack.externals,
+        allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
+      })].concat(curWebpackConfig.externals)
+      : curWebpackConfig.externals,
     module: {
       rules: [
         {
@@ -146,16 +153,22 @@ module.exports = (_curEnvConfig, _curWebpackConfig) => {
     },
     plugins: [
       BannerPack,
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV)
+      }),
       // 请确保引入这个插件来施展魔法
-      new VueLoaderPlugin()
+      new VueLoaderPlugin(),
+      new FriendlyErrorsPlugin(),
+      new ProgressBarPlugin()
     ]
   };
   // 优先使用执行环境中的配置
-  if (curEnvConfig.ignoreNodeModules) {
-    const allowList = curEnvConfig.allowList || config.webpack.allowList;
-    webpackConfig.externals = [nodeExternals({
+  if (curEnvConfig.ignoreNodeModules !== undefined) {
+    const allowList = curEnvConfig.allowList || curWebpackConfig.allowList;
+    const externals = curEnvConfig.externals || config.webpack.external || [];
+    webpackConfig.externals = curEnvConfig.ignoreNodeModules ? [nodeExternals({
       allowlist: allowList || [],
-    })].concat(curEnvConfig.externals || config.webpack.externals);
+    })].concat(externals) : externals;
   }
   // 集成构建入口相关的配置（优先级更高）
   if (curEnvConfig.entry) {

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

@@ -1,8 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
 const merge = require('webpack-merge');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
 const projectConfig = require('../config/index');
@@ -13,7 +11,7 @@ module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.dev || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config.webpack);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
 
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
@@ -32,17 +30,32 @@ module.exports = (akfunConfig) => {
         environment: 'dev'
       })
     },
-    // cheap-module-eval-source-map is faster for development
-    devtool: '#source-map', // '#cheap-module-eval-source-map',
+    // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
+    devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'eval-source-map' : 'eval', // 开发环境
+    optimization: {
+      chunkIds: 'named', // named 对调试更友好的可读的 id。
+      emitOnErrors: true,
+      splitChunks: {
+        cacheGroups: {
+          defaultVendors: { // 4.0: vendors
+            test: /node_modules\/(.*)/,
+            name: 'vendor',
+            chunks: 'initial',
+            reuseExistingChunk: true
+          },
+          common: {
+            name: 'common',
+            minChunks: 2,
+            priority: -20,
+            chunks: 'initial',
+            reuseExistingChunk: true
+          }
+        }
+      }
+    },
     plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV) // vue-router中根据此变量判断执行环境
-      }),
       // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
       new webpack.HotModuleReplacementPlugin(),
-      new webpack.NoEmitOnErrorsPlugin(),
-      new FriendlyErrorsPlugin(),
-      new ProgressBarPlugin()
     ]
   });
 

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

@@ -1,11 +1,8 @@
-const webpack = require('webpack');
 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;
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
@@ -16,17 +13,20 @@ module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build2lib || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config.webpack);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
 
   const webpackLibConfig = merge(baseWebpackConfig, {
     mode: curEnvConfig.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
     output: {
       path: curEnvConfig.assetsRoot, // 输出文件的存放在本地的目录
-      filename: '[name].umd.js',
+      filename: 'index.umd.js',
       publicPath: '',
-      library: curEnvConfig.libraryName, // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
+      library: {
+        type: 'umd', // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
+        name: curEnvConfig.libraryName,
+      },
+      // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
       globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
-      libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
     },
     module: {
       rules: utils.styleLoaders({
@@ -34,11 +34,16 @@ module.exports = (akfunConfig) => {
         environment: 'prod'
       })
     },
-    devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // '#source-map': 源码，false：压缩代码
+    devtool:  curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
+    optimization: {
+      /**
+       *  named 对调试更友好的可读的 id。
+       *  deterministic 在不同的编译中不变的短数字 id。有益于长期缓存。在生产模式中会默认开启。
+       */
+      chunkIds: 'named',
+      emitOnErrors: true
+    },
     plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV)
-      }),
       new MiniCssExtractPlugin({
         // filename: utils.assetsPath('index.css'),
         filename: "[name].css",
@@ -50,8 +55,6 @@ module.exports = (akfunConfig) => {
           safe: true
         }
       }),
-      new FriendlyErrorsPlugin(),
-      new ProgressBarPlugin()
     ]
   });
 

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

@@ -1,6 +1,5 @@
 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 // const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 不支持webpack4.0
@@ -8,8 +7,6 @@ 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');
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const utils = require('./loaderUtils');
@@ -23,7 +20,7 @@ module.exports = (akfunConfig) => {
   let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
   const curEnvConfig = config.build || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config.webpack);
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig, config);
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
   if (config.webpack.template) {
@@ -52,12 +49,13 @@ module.exports = (akfunConfig) => {
         environment: 'prod'
       })
     },
-    // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
-    devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // 线上开发环境中的取值
+    devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
     optimization: {
+      chunkIds: 'deterministic', // 在不同的编译中不变的短数字 id。有益于长期缓存。在生产模式中会默认开启。
+      emitOnErrors: true,
       splitChunks: {
         cacheGroups: {
-          vendors: {
+          defaultVendors: { // 4.0: vendors
             test: /node_modules\/(.*)/,
             name: 'vendor',
             chunks: 'initial',
@@ -74,10 +72,6 @@ module.exports = (akfunConfig) => {
       }
     },
     plugins: [
-      // http://vuejs.github.io/vue-loader/en/workflow/production.html
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV) // vue-router中根据此变量判断执行环境
-      }),
       new MiniCssExtractPlugin({
         filename: utils.assetsPath('css/[name].[contenthash:8].css'),
         ignoreOrder: false // Enable to remove warnings about conflicting order
@@ -97,8 +91,6 @@ module.exports = (akfunConfig) => {
           safe: true
         }
       }),
-      new FriendlyErrorsPlugin(),
-      new ProgressBarPlugin()
     ]
   });