akfun 1.6.9 → 1.6.13

package/README.md

@@ -253,6 +253,7 @@ module.exports = {
   ...
   webpack: {
     ignoreNodeModules: true,
+    allowList: [], // 用于配置会注入bundle中的依赖包（ignoreNodeModules为true时生效）
   }
   ...
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "1.6.9",
+  "version": "1.6.13",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",

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

@@ -1,18 +1,21 @@
 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 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 BannerPack = new webpack.BannerPlugin({
@@ -23,10 +26,13 @@ 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 = {
@@ -46,6 +52,11 @@ module.exports = (_curEnvConfig, _curWebpackConfig) => {
      * 当webpack试图去加载模块的时候，它默认是查找以 .js 结尾的文件的
      */
     resolve: curWebpackConfig.resolve,
+    externals: curWebpackConfig.ignoreNodeModules
+      ? [nodeExternals({
+        allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
+      })].concat(curWebpackConfig.externals)
+      : curWebpackConfig.externals,
     module: {
       rules: [
         {
@@ -141,6 +152,46 @@ module.exports = (_curEnvConfig, _curWebpackConfig) => {
       new VueLoaderPlugin()
     ]
   };
+  // 优先使用执行环境中的配置
+  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(externals) : externals;
+  }
+  // 集成构建入口相关的配置（优先级更高）
+  if (curEnvConfig.entry) {
+    webpackConfig.entry = curEnvConfig.entry; // 会覆盖config.webpack.entry的配置
+  }
+  // 多页面多模板支持能力
+  let entryConfig = webpackConfig.entry || {}; // 获取构建入口配置
+  const entryFiles = (entryConfig && Object.keys(entryConfig)) || [];
+
+  if (
+    !webpackConfig.entry ||
+    JSON.stringify(webpackConfig.entry) === '{}' ||
+    entryFiles.length === 0
+  ) {
+    // 如果当前构建入口为空，则自动从'./src/pages/'中获取入口文件
+    webpackConfig.entry = getJsEntries();
+  } else if (webpackConfig.entry && entryFiles.length === 1) {
+    /**
+     * 只有一个构建入口文件，且项目中不存在此文件，则自动从'./src/pages/'中获取构建入口文件
+     */
+    const filename = entryFiles[0];
+    let entryFilePath = entryConfig[filename];
+    // 当前entryFilePath可能是一个地址字符串，也可能是一个存储多个文件地址的数组
+    if (isArray(entryFilePath)) {
+      // 如果是数组则自动获取最后一个文件地址
+      entryFilePath = entryFilePath[entryFilePath.length - 1];
+    }
+    if (!fs.existsSync(entryFilePath)) {
+      // 如果仅有的构建入口文件不存在，则自动从'./src/pages/'中获取入口文件
+      const curJsEntries = getJsEntries();
+      webpackConfig.entry = curJsEntries ? curJsEntries : webpackConfig.entry;
+    }
+  }
   // 是否开启ESLint
   if (config.settings.enableESLint) {
     // ts类型

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

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const webpack = require('webpack');
 const path = require('path');
 const merge = require('webpack-merge');
@@ -8,15 +7,13 @@ const utils = require('./loaderUtils');
 // 引入当前项目配置文件
 const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
-const getJsEntries = require('../utils/jsEntries');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
-const { isArray } = require('../utils/typeof');
 
 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');
@@ -49,40 +46,6 @@ module.exports = (akfunConfig) => {
     ]
   });
 
-  // 集成dev配置中的构建入口（优先级高于config.webpack.entry）
-  if (curEnvConfig.entry) {
-    webpackDevConfig.entry = curEnvConfig.entry; // 备注：会覆盖config.webpack.entry的配置
-  }
-
-  // 多页面多模板支持能力
-  let entryConfig = webpackDevConfig.entry || {}; // 获取构建入口配置
-  const entryFiles = (entryConfig && Object.keys(entryConfig)) || [];
-
-  if (
-    !webpackDevConfig.entry ||
-    JSON.stringify(webpackDevConfig.entry) === '{}' ||
-    entryFiles.length === 0
-  ) {
-    // 如果当前构建入口为空，则自动从'./src/pages/'中获取入口文件
-    webpackDevConfig.entry = getJsEntries();
-  } else if (webpackDevConfig.entry && entryFiles.length === 1) {
-    /**
-     * 只有一个构建入口文件，且项目中不存在此文件，则自动从'./src/pages/'中获取构建入口文件
-     */
-    const filename = entryFiles[0];
-    let entryFilePath = entryConfig[filename];
-    // 当前entryFilePath可能是一个地址字符串，也可能是一个存储多个文件地址的数组
-    if (isArray(entryFilePath)) {
-      // 如果是数组则自动获取最后一个文件地址
-      entryFilePath = entryFilePath[entryFilePath.length - 1];
-    }
-    if (!fs.existsSync(entryFilePath)) {
-      // 如果仅有的构建入口文件不存在，则自动从'./src/pages/'中获取入口文件
-      const curJsEntries = getJsEntries();
-      webpackDevConfig.entry = curJsEntries ? curJsEntries : webpackDevConfig.entry;
-    }
-  }
-
   // 使用用户自定义的多入口配置，生产对应的多页面多模板（优先使用用户的自定义页面模板）
   const htmlWebpackPluginList = entrys2htmlWebpackPlugin(webpackDevConfig.entry, curHtmlTemplate);
   htmlWebpackPluginList.forEach((htmlWebpackPlugin) => {

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

@@ -6,7 +6,6 @@ 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 nodeExternals = require('webpack-node-externals');
 
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
@@ -17,7 +16,7 @@ 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服务
@@ -36,11 +35,6 @@ module.exports = (akfunConfig) => {
       })
     },
     devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // '#source-map': 源码，false：压缩代码
-    externals: config.webpack.ignoreNodeModules
-      ? [nodeExternals({
-        allowlist: config.webpack.allowList ? config.webpack.allowList : []
-      })].concat(config.webpack.externals)
-      : config.webpack.externals,
     plugins: [
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV)
@@ -48,7 +42,7 @@ module.exports = (akfunConfig) => {
       new MiniCssExtractPlugin({
         // filename: utils.assetsPath('index.css'),
         filename: "[name].css",
-        chunkFilename: "[id].css",
+        chunkFilename: "[name].css",
         ignoreOrder: false
       }),
       new OptimizeCSSPlugin({
@@ -78,10 +72,5 @@ module.exports = (akfunConfig) => {
     webpackLibConfig.plugins.push(new BundleAnalyzerPlugin());
   }
 
-  // 集成构建入口相关的配置
-  if (curEnvConfig.entry) {
-    webpackLibConfig.entry = curEnvConfig.entry; // 会覆盖config.webpack.entry的配置
-  }
-
   return webpackLibConfig;
 };

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

@@ -10,14 +10,11 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const nodeExternals = require('webpack-node-externals');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const utils = require('./loaderUtils');
 const { resolve } = require('../utils/pathUtils'); // 统一路径解析
-const getJsEntries = require('../utils/jsEntries');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
-const { isArray } = require('../utils/typeof');
 // 引入当前项目配置文件
 const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
@@ -26,7 +23,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) {
@@ -55,11 +52,6 @@ module.exports = (akfunConfig) => {
         environment: 'prod'
       })
     },
-    externals: config.webpack.ignoreNodeModules
-      ? [nodeExternals({
-        allowlist: config.webpack.allowList ? config.webpack.allowList : []
-      })].concat(config.webpack.externals)
-      : config.webpack.externals,
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
     devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // 线上开发环境中的取值
     optimization: {
@@ -110,41 +102,6 @@ module.exports = (akfunConfig) => {
     ]
   });
 
-  // 集成build配置中的构建入口
-  if (curEnvConfig.entry) {
-    // 会覆盖config.webpack.entry的配置
-    webpackProdConfig.entry = curEnvConfig.entry;
-  }
-
-  // 多页面支持能力
-  let entryConfig = webpackProdConfig.entry || {}; // 获取构建入口配置
-  const entryFiles = (entryConfig && Object.keys(entryConfig)) || [];
-
-  if (
-    !webpackProdConfig.entry ||
-    JSON.stringify(webpackProdConfig.entry) === '{}' ||
-    entryFiles.length === 0
-  ) {
-    // 自动从'./src/pages/'中获取入口文件
-    webpackProdConfig.entry = getJsEntries();
-  } else if (webpackProdConfig.entry && entryFiles.length === 1) {
-    /**
-     * 只有一个构建入口文件，且项目中不存在此文件，则自动从'./src/pages/'中获取构建入口文件
-     */
-    const filename = entryFiles[0];
-    let entryFilePath = entryConfig[filename];
-    // 当前entryFilePath可能是一个地址字符串，也可能是一个存储多个文件地址的数组
-    if (isArray(entryFilePath)) {
-      // 如果是数组则自动获取最后一个文件地址
-      entryFilePath = entryFilePath[entryFilePath.length - 1];
-    }
-    if (!fs.existsSync(entryFilePath)) {
-      // 如果仅有的构建入口文件不存在，则自动从'./src/pages/'中获取入口文件
-      const curJsEntries = getJsEntries();
-      webpackProdConfig.entry = curJsEntries ? curJsEntries : webpackProdConfig.entry;
-    }
-  }
-
   // 使用用户自定义的多入口配置，生产对应的多页面多模板
   const htmlWebpackPluginList = entrys2htmlWebpackPlugin(webpackProdConfig.entry, curHtmlTemplate);