akfun 5.1.9 → 5.1.11

package/README.md

@@ -1,161 +1,88 @@
-# AKFun 前端脚手架
-> AKFun 是一个基于 Webpack 和 rollup 的前端多场景打包工具，支持多种技术栈：Vue技术栈、React技术栈、React&TS技术栈
-- 核心理念：提供完整&全面的前端工程能力，并尽可能屏蔽掉前端工程相关配置，让开发者更专注业务研发工作。
-- 技术栈：node/webpack/rollup/babel/eslint/stylelint
-
-## 特性
-- ⚡️ 零配置，开箱即用
-- 👏 支持Vue和React项目的调试和构建
-- 支持单页面和多页面
-- 提供三种构建场景: 本地开发模式(包含热更新、接口代理等功能)、生产环境代码构建、library库构建(支持umd和esm的打包能力)
-- 开放配置能力: 可配置构建入口文件、开启ESLint代码检测、接口代理等
-- 支持 [Autoprefixer](https://github.com/postcss/autoprefixer#readme)、[Sass](https://sass-lang.com/)、[PostCSS](https://postcss.org/)、[ESLint](http://eslint.cn/)、[StyleLint](https://stylelint.io/)
-- 支持项目系统参数自动批量替换 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader)
-- 提供完整的Vue和React项目模板
-
-## 快速开始 / 使用方法一
-> 全局安装AKFun，用于同时管理多个前端项目代码（可使用AKFun创建一个新项目）
-
-1. **全局安装**
+## AKFun 前端脚手架
+AKFun 是一个基于 Webpack 与 Rollup 的多场景前端打包工具，支持 Vue、React、React+TS 技术栈，致力于提供“零配置、开箱即用”的工程能力，让开发者专注业务。
+
+### 主要特性
+- **零配置**: 内置默认配置，开箱即用；
+- **多技术栈**: 支持 Vue、React、React+TS 的调试与构建；
+- **多构建场景**: 本地开发（含热更新/代理）、生产构建、库构建（UMD/ESM）；
+- **灵活可配**: 支持入口、别名、代理、SASS 注入、ESLint/StyleLint、Babel/Loader/Plugin 扩展等配置；
+- **样式与规范**: 集成 Autoprefixer、Sass、PostCSS、ESLint、StyleLint；
+- **参数替换**: 支持基于 [params-replace-loader](https://www.npmjs.com/package/params-replace-loader) 的环境变量批量替换；
+- **模板支持**: 提供完整的 Vue/React 项目模板。
+
+## 快速开始
+
+### 方法一：全局安装
+1) 安装
 ```bash
-$ yarn global add akfun 或者  npm i -g akfun
+yarn global add akfun
+# 或
+npm i -g akfun
 ```
-
-2. **初始化一个项目**
-> 可选择项目类型：vue或者react，默认react类型的项目，也可通过--dir参数指定存放项目模板的目录
+2) 创建项目（可指定模板与目录）
 ```bash
-$ akfun init -t=vue
+akfun init -t=vue
+# 指定目录
+akfun init -t=vue --dir=myTest1
 ```
+3) 运行构建（需先安装依赖）
+```bash
+# 本地开发调试
+akfun dev
 
-3. **开始使用：以全局命令方式构建项目（确保已yarn install或者npm install）**
+# 生产环境构建
+akfun build
 
-```bash
-# 1、开启本地调试模式
-$ akfun dev
-```
+# 构建库（UMD）
+akfun build2lib
 
-```bash
-# 2、构建生产环境代码
-$ akfun build
+# 构建库（ESM）
+akfun build2esm
 ```
 
+### 方法二：在现有项目中使用
+1) 安装到当前项目
 ```bash
-# 3、构建第三方功能包（以umd格式输出）
-$ akfun build2lib
+yarn add akfun --dev
+# 或
+npm i akfun --save-dev
 ```
-
+2) 在 package.json 添加脚本
 ```bash
-# 4、构建第三方功能包的esm输出格式
-$ akfun build2esm
+"dev": "akfun dev",
+"build": "akfun build",
+"build2lib": "akfun build2lib",
+"build2esm": "akfun build2esm"
 ```
-
-## 快速开始 / 使用方法二
-> 在现有项目中局部安装AKFun，给现有项目赋予AKFun的前端工程能力
-
-1. **本地安装**
-
+3) 初始化配置文件（按需调整入口、别名、代理等）
 ```bash
-$ yarn add akfun --dev 或者 npm i akfun --save-dev
+akfun config init
 ```
-
-2. **在package.json中创建可执行脚本**
-> 打开package.json，在scripts中新增三条可执行命令
-
+4) 开发与构建
 ```bash
-# 用于开启本地调试模式
-"dev": "akfun dev"
-
-# 用于构建生产环境代码
-"build": "akfun build"
-
-# 用于构建第三方功能包（以umd格式输出）
-"build2lib": "akfun build2lib"
-
-# 用于构建第三方功能包（以esm格式输出）
-"build2esm": "akfun build2esm"
+npm run dev
+npm run build
+npm run build2lib
+npm run build2esm
 ```
 
-3. **创建AKFun的配置文件**
-> 需要根据实际情况调整配置文件内（比如：入口文件、路径缩写、接口代理等）
-
-    ```bash
-    $ akfun config init
-    ```
-
-4. **开始构建当前项目**
-
-   4.1 开启本地调试模式
-    ```bash
-    $ npm run dev
-    ```
-   4.2 构建生产环境代码
-   ```bash
-   $ npm run build
-   ```
-   4.3 构建第三方功能包（以umd格式输出）
-   ```bash
-   $ npm run build2lib
-   ```
-   4.4 构建第三方功能包（以esm格式输出）
-   ```bash
-   $ npm run build2esm
-   ```
+## 常用命令
+- **akfun init**: 交互式创建项目（支持 -t、--dir）。
+- **akfun config init**: 在当前项目生成 `akfun.config.js`。
+- **akfun dev**: 本地开发调试（含热更新、接口代理、可选 HTTPS、可选 ESLint/StyleLint）。
+- **akfun build**: 生产环境构建（压缩优化、可选分析）。
+- **akfun build2lib**: 构建 UMD 库产物。
+- **akfun build2esm**: 构建 ESM 库产物。
 
-## AKFun使用说明
+## 多页面与模板
+- 当 `entry` 仅配置一个且对应文件不存在时，会自动从 `src/pages` 扫描以 `.ts/.tsx/.js/.jsx` 结尾的文件作为入口，匹配同名 HTML 作为模板（对应正则 `/\.[tj]sx?$/`）。
+- 仅 `dev` 和 `build` 使用页面模板；`build2lib` 不向页面注入打包产物。
+- 优先使用 `./src/index.html`；不存在时使用内置默认模板。多页面时若 `pages` 下存在同名 HTML，将其作为页面模板。
 
-1. **使用AKFun新建一个新项目**
+## 配置说明（akfun.config.js）
+AKFun 默认提供完整配置；如需自定义，执行 `akfun config init` 生成 `akfun.config.js` 并按需修改。以下为常用配置。
 
-    1.1 创建一个react项目
-    ```bash
-    $ akfun init
-    ```
-    1.2 创建一个vue类型项目
-    ```bash
-    $ akfun init -t=vue
-    ```
-    1.3 在指定的目录中创建一个新项目
-    ```bash
-    $ akfun init -t=vue --dir=myTest1
-    ```
-
-2. **创建AKFun的配置文件**
-    ```bash
-    $ akfun config init
-    ```
-
-3. **关于AKFun提供三种构建场景**
-    1. **dev**: 本地开发调试模式，用于本地开发和调试项目(包含热更新、接口代理等功能)，编译的代码没有压缩，默认会开启ESLint检测代码规范（可关闭）
-    2. **build**: 用于构建生产环境代码，编译输出的代码会进行压缩优化
-    3. **build2lib**: 用于构建library库，以umd进行输出
-    4. **build2esm**: 用于构建library库，以esm进行输出
-
-4. **关于AKFun的配置文件**
-    1. AKFun会提供全量的默认配置，实现零配置、开箱即用的能力
-    2. 自定义构建配置，请在当前项目根目录创建AKFun配置文件（akfun.config.js），AKFun提供初始化配置文件的方法：
-    ```bash
-    $ akfun config init
-    ```
-    3. akfun.config.js为当前项目的配置文件，优先级最高（可覆盖AKFun提供的默认配置）
-
-5. **配置构建入口文件（webpack.entry）**
-    1. 默认的构建入口文件: ./src/index.js
-    2. 自定义构建入口(akfun.config.js中提供对应的配置入口)
-        1. 在webpack.entry配置构建入口，dev\build\build2lib都会以此为构建入口 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))
-        2. 在dev.entry、build.entry、build2lib.entry中配置对应执行环境的构建入口，优先级高于webpack.entry
-
-6. **关于多页面**
-    1. 当akfun.config.js的entry只有一个入口配置，且对应的构建入口文件不存在时，AKFun会自动从src/pages中获取构建入口（支持多页面多模板）
-    2. 多页面模式下，会自动将src/pages中以.ts、.tsx、.js、.jsx结尾（对应的匹配正则：/\.[tj]sx?$/）的文件作为构建入口文件，同时将同名的html文件作为当前页面模板
-
-7. **关于多页面多模板**
-    1. 只有dev和build的构建过程中才会使用到页面模板，build2lib构建中不会将打包完成的代码输出到页面模板中
-    2. 默认使用./src/index.html作为页面模板
-    3. 当项目中./src/index.html不存在时，会使用AKFun的提供的默认页面模板
-    4. 多页面模式时，如果pages下存在对应的html页面（与入口文件同名的html文件），会自动将其设置为页面模板
-
-## AKFun开放的配置能力
-> AKFun配置文件（akfun.config.js），以下使用AKFunConfig代表akfun.config.js配置对象
-1. 开启/关闭 ESLint代码规范检测: AKFunConfig.settings.enableEslint (也可配置StyleLint的使用)
+### 1) 基础规范与检查
 ```bash
 module.exports = {
   settings: {
@@ -167,37 +94,29 @@ module.exports = {
   ...
 }
 ```
-2. 配置构建入口文件: 关于配置优先级请查看 AKFun使用说明 / 配置构建入口文件
-> 以下是entry的配置位置，具体配置方法请查看Webpack官网 ([关于entry的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry))
-> 备注：建议以key/value形式（object { <key>: string | [string] }）配置entry
+
+### 2) 构建入口（优先级：dev/build/build2lib.entry > webpack.entry）
+> 备注：建议以 key/value（object { <key>: string | [string] }）配置 entry。详情参考 Webpack 文档：[关于 entry 的配置方法](https://www.webpackjs.com/configuration/entry-context/#entry)
 ```bash
 module.exports = {
   ...
   webpack: {
-    entry: {
-      index: './src/index.js',
-    }
+    entry: { index: './src/index.js' },
   },
   ...
-  dev: {
-    entry: {}
-  }
-  build: {
-    entry: {}
-  }
-  build2lib: {
-    entry: {}
-  }
+  dev: { entry: {} },
+  build: { entry: {} },
+  build2lib: { entry: {} },
   build2esm: {
     input: resolve('src/main.js'),
     fileName: 'index',
-  }
+  },
   ...
 }
 ```
 
-3. 解析(resolve) / extensions配置: 自动解析确定的扩展（配置可识别的文件后缀）
-> 以下是extensions的配置位置，具体配置方法请查看Webpack官网 ([关于resolve-extensions的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-extensions))
+### 3) 解析配置（extensions）
+> 详情参考 Webpack 文档：[关于 resolve.extensions 的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-extensions)
 ```bash
 module.exports = {
   ...
@@ -210,8 +129,8 @@ module.exports = {
 }
 ```
 
-4. 解析(resolve) / alias配置: 创建 import 或 require 的别名，来确保模块引入变得更简单
-> 以下是alias的配置位置，具体配置方法请查看Webpack官网 ([关于resolve-alias的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias))
+### 4) 别名配置（alias）
+> 详情参考 Webpack 文档：[关于 resolve.alias 的配置方法](https://www.webpackjs.com/configuration/resolve/#resolve-alias)
 ```bash
 module.exports = {
   ...
@@ -223,68 +142,46 @@ module.exports = {
   ...
 }
 ```
-5. 页面模板路径配置：关于页面模板请查看 AKFun使用说明 / 关于页面模板
-```bash
-module.exports = {
-  ...
-  webpack: {
-    template: '',
-  }
-  ...
-}
-```
 
-6. 注入公共的SASS文件
-> 为项目中每个.scss后缀的样式文件注入公共的SASS内容（变量、mixin、function等）
+### 5) 页面模板与样式资源
 ```bash
 module.exports = {
   ...
   webpack: {
-    sassResources: [],
+    template: '', // 自定义页面模板
+    sassResources: [], // 为每个 .scss 注入公共 SASS（变量、mixin、function 等）
   }
   ...
 }
 ```
 
-7. 打包忽略node_modules配置项: ignoreNodeModules（默认为false）
-> 打包过程中，忽略node_modules中的依赖文件，不注入到bundle中，减少最后生成代码体积
+### 6) 依赖打包策略（忽略 node_modules）
+> 打包过程中忽略 node_modules 依赖，减少最终体积；可通过 allowList 指定需注入 bundle 的依赖。
 ```bash
 module.exports = {
   ...
   webpack: {
-    ignoreNodeModules: true,
+    ignoreNodeModules: true, // 是否忽略node_modules中的依赖文件
     allowList: [], // 用于配置会注入bundle中的依赖包（ignoreNodeModules为true时生效）
   }
   ...
 }
 ```
 
-8. 是否生成ts声明文件配置项: createDeclaration（默认为false）
-> 构建ts项目中，可以选择是否生成ts声明文件
-```bash
-module.exports = {
-  ...
-  webpack: {
-    createDeclaration: true,
-  }
-  ...
-}
-```
-
-9. 配置项目源码目录（工程有效目录范围）: projectDir
-> 构建项目中，设置生效的目录（可同时设置多个目录），用于提高前端工程执行效率。可以不配置，默认为['./src']
+### 7) TypeScript 声明文件与工程目录
 ```bash
 module.exports = {
   ...
   webpack: {
-    projectDir: ['./src'],
+    createDeclaration: true, // 是否生成ts声明文件
+    projectDir: ['./src'], // 可配置多个目录，用于提升工程执行效率
   }
   ...
 }
 ```
 
-10. 项目源码环境变量批量替换
-> [关于params-replace-loader的使用方法](https://www.npmjs.com/package/params-replace-loader)
+### 8) 环境变量替换（params-replace-loader）
+> [关于 params-replace-loader 的使用方法](https://www.npmjs.com/package/params-replace-loader)
 ```bash
 module.exports = {
   ...
@@ -302,116 +199,119 @@ module.exports = {
 }
 ```
 
-11. 接口代理配置：目前只有dev本地开发调试模式下会启动
-> [关于proxyTable的配置方法](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)
+### 9) 开发服务（代理与基础配置）
+> [关于 proxyTable 的配置方法](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)
 ```bash
 module.exports = {
   ...
   dev: {
-    proxyTable: {
+    NODE_ENV: 'development', // development 模式，不会启动UglifyJsPlugin服务
+    port: 80, // 启动server服务的端口
+    autoOpenBrowser: true, // 是否自动打开页面
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    hostname: 'localhost', // 自动打开的页面主机
+    proxyTable: { // 接口代理
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true
+      }
     },
-  }
+    cssSourceMap: false,
+  },
   ...
 }
 ```
 
-12. 用于开启本地调试模式的相关配置信息
+### 10) 生产构建
 ```bash
 module.exports = {
   ...
-    dev: {
-      NODE_ENV: 'development', // development 模式，不会启动UglifyJsPlugin服务
-      port: 80, // 启动server服务的端口
-      autoOpenBrowser: true, // 是否自动打开页面
-      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-      assetsSubDirectory: '', // 资源引用二级路径
-      hostname: 'localhost', // 自动打开的页面主机
-      proxyTable: { // 接口代理
-        '/apiTest': {
-          target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
-          ws: true,
-          changeOrigin: true
-        }
-      },
-      cssSourceMap: false,
-    },
+  build: {
+    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
+    assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径）
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false, // 是否显示原始源代码
+    productionGzip: false, // 是否开启Gzip服务
+    productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
+    bundleAnalyzerReport: false, // 开启打包分析功能
+  }
   ...
 }
 ```
 
-13. 用于构建生产环境代码的相关配置信息
+### 11) 库构建（UMD）
 ```bash
 module.exports = {
   ...
-    build: {
-      NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
-      assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径）
-      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-      assetsSubDirectory: '', // 资源引用二级路径
-      productionSourceMap: false, // 是否显示原始源代码
-      productionGzip: false, // 是否开启Gzip服务
-      productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
-      bundleAnalyzerReport: false, // 开启打包分析功能
-    }
+  build2lib: {
+    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
+    libraryName: '', // 构建第三方功能包时最后导出的引用变量名
+    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false, // 是否显示原始源代码
+    productionGzip: false, // 是否开启Gzip服务
+    productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
+    bundleAnalyzerReport: false, // 开启打包分析功能
+  },
   ...
 }
 ```
 
-14. 用于构建第三方功能包的配置（以umd格式输出）
+### 12) 库构建（ESM）
 ```bash
 module.exports = {
   ...
-    build2lib: {
-      NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
-      libraryName: '', // 构建第三方功能包时最后导出的引用变量名
-      assetsRoot: resolve('dist'), // 编译完成的文件存放路径
-      assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-      assetsSubDirectory: '', // 资源引用二级路径
-      productionSourceMap: false, // 是否显示原始源代码
-      productionGzip: false, // 是否开启Gzip服务
-      productionGzipExtensions: ['js', 'css', 'json'], // Gzip识别的文件后缀
-      bundleAnalyzerReport: false, // 开启打包分析功能
-    },
+  build2esm: {
+    input: resolve('src/main.js'), // 入口文件
+    fileName: 'index', // 输出的文件名称
+    svgDir: 'src/icons/**', // 用于设置当前项目的icon所在目录，避免被 @rollup/plugin-image 编译成base64格式
+  },
   ...
 }
 ```
 
-15. 用于构建esm格式的第三方功能包配置
+### 13) 自定义 Loader / Plugin / Babel Plugins
 ```bash
 module.exports = {
-  ...
-    build2esm: {
-      input: resolve('src/main.js'), // 入口文件
-      fileName: 'index', // 输出的文件名称
-      svgDir: 'src/icons/**', // 用于设置当前项目的icon所在目录，避免被 @rollup/plugin-image 编译成base64格式
-    },
-  ...
+  webpack: {
+    moduleRules: [], // 用于添加自定义 loaders
+    plugins: [], // 用于添加自定义 plugins
+    babelPlugins: [  // 用于添加自定义 Babel plugins
+      [
+        'component',
+        { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' },
+      ],
+    ],
+  },
 }
 ```
+备注: 以上自定义 babelPlugins 用于实现 [element-ui 组件按需引入](https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru)。  
 
-16. 自定义css-loader的配置
-> 比如用于启用/禁用 @import 解析。
+也支持以函数形式动态调整内置 Babel Plugins：  
 ```bash
 module.exports = {
-  ...
   webpack: {
-    ...
-    cssLoaderOption: {
-      import: false, // 启用/禁用 @import 解析
-    }
-  }
-  ...
+    babelPlugins: (curBabelPlugins) => {
+      curBabelPlugins.push(/* your plugin */)
+      return curBabelPlugins
+    },
+  },
 }
 ```
 
-17. 自定义postcss-loader的配置
-> 比如用于添加 PostCSS 选项与插件。
+### 14) 自定义 css-loader / 自定义 postcss-loader
 ```bash
 module.exports = {
   ...
   webpack: {
-    ...
-    postCssLoaderOption: {
+    cssLoaderOption: {
+      import: false, // 启用/禁用 @import 解析
+    },
+    postCssLoaderOption: { // 自定义postcss-loader的配置
       postcssOptions: {
         plugins: [
           require('postcss-pxtorem')({ // 用于将px自动转化为rem
@@ -426,8 +326,8 @@ module.exports = {
 }
 ```
 
-18. 本地开启https服务
-> 使用 https://localhost/index.html 访问当前项目。
+### 15) 本地 HTTPS
+> 使用 `https://localhost/index.html` 访问当前项目。
 ```bash
 module.exports = {
   ...

package/package.json

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

package/src/dev-server.js

@@ -92,15 +92,17 @@ module.exports = function (akfunConfig, _consoleTag) {
   // serve webpack bundle output
   app.use(devMiddleware);
 
-  // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
-  const hotMiddleware = require('webpack-hot-middleware')(compiler, {
-    log: false,
-    heartbeat: 2000
-  });
+  if (!curEnvConfig.closeHotReload) {
+    // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
+    const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+      log: false,
+      heartbeat: 2000
+    });
 
-  // enable hot-reload and state-preserving
-  // compilation error display
-  app.use(hotMiddleware);
+    // enable hot-reload and state-preserving
+    // compilation error display
+    app.use(hotMiddleware);
+  }
 
   const afterCreateServerAction = (isHttps, port) => {
     spinner.succeed(`${consoleTag}调试模式已开启！`);

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

@@ -29,7 +29,7 @@ const BannerPack = new webpack.BannerPlugin({
 /**
  * webpack.base.conf.js
  * 主要用于设置 rules 和 通用插件
- * _curEnvConfig: 执行环境中的配置，比如：dev、build、build2lib等；
+ * _curEnvConfig: 执行环境中的配置，用于记录 dev、build、build2lib 等对应的配置内容；
  * _akfunConfig：完整的配置对象
  */
 module.exports = (_curEnvConfig, _akfunConfig) => {
@@ -74,15 +74,7 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
      * 当webpack试图去加载模块的时候，它默认是查找以 .js 结尾的文件的
      */
     resolve: curWebpackConfig.resolve,
-    externals: curWebpackConfig.ignoreNodeModules
-      ? [
-          nodeExternals({
-            importType: 'commonjs',
-            additionalModuleDirs: curWebpackConfig.additionalModuleDirs || [],
-            allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
-          })
-        ].concat(curWebpackConfig.externals)
-      : curWebpackConfig.externals,
+    externals: {},
     module: {
       rules: [
         {
@@ -208,28 +200,37 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
       new ProgressBarPlugin()
     ]
   };
+
+  let ignoreNodeModules = curWebpackConfig.ignoreNodeModules;
   // 优先使用执行环境中的配置
   if (curEnvConfig.ignoreNodeModules !== undefined) {
-    const allowList = curEnvConfig.allowList || curWebpackConfig.allowList;
-    const externals = curEnvConfig.externals || curWebpackConfig.external || [];
-    webpackConfig.externals = curEnvConfig.ignoreNodeModules
-      ? [
-          nodeExternals({
-            importType: 'commonjs',
-            additionalModuleDirs:
-              curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
-            allowlist: allowList || []
-          })
-        ].concat(externals)
-      : externals;
+    ignoreNodeModules = curEnvConfig.ignoreNodeModules;
   }
+
+  // allowList 需要开启 ignoreNodeModules 后有效
+  const allowList = curEnvConfig.allowList || curWebpackConfig.allowList;
+  // 用户手动添加要剔除的依赖
+  const externals = curEnvConfig.externals || curWebpackConfig.external || [];
+
+  // 设置要剔除的依赖
+  webpackConfig.externals = ignoreNodeModules
+    ? [
+        nodeExternals({
+          importType: 'commonjs',
+          additionalModuleDirs:
+            curEnvConfig.additionalModuleDirs || curWebpackConfig.additionalModuleDirs || [],
+          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)) || [];
+  const entryFiles = Object.keys(entryConfig);
 
   if (
     !webpackConfig.entry ||

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

@@ -81,10 +81,10 @@ module.exports = (akfunConfig) => {
     });
   }
 
-  // 开启热更新能力
-  const devClientPath = path.resolve(__dirname, '../dev-client'); // 从akfun中获取
-  // add hot-reload related code to entry chunks
   if (!curEnvConfig.closeHotReload && webpackDevConfig.entry) {
+    // 开启热更新能力
+    const devClientPath = path.resolve(__dirname, '../dev-client'); // 从akfun中获取
+    // add hot-reload related code to entry chunks
     Object.keys(webpackDevConfig.entry).forEach((name) => {
       webpackDevConfig.entry[name] = [devClientPath].concat(webpackDevConfig.entry[name]);
     });