akfun 1.5.13 → 1.5.18

package/README.md

@@ -1,13 +1,14 @@
 # AKFun 前端脚手架
 > AKFun 是一个基于 Webpack4.0 和 rollup 的前端多场景打包工具，支持多种技术栈：Vue技术栈、React技术栈、React&TS技术栈
-- 技术栈：node/webpack4.0/rollup/express/babel/eslint/stylelint
+- 核心理念：提供完整&全面的前端工程能力，并尽可能屏蔽掉前端工程相关配置，让开发者更专注业务研发工作。
+- 技术栈：node/webpack4.0/rollup/babel/eslint/stylelint
 
 ## 特性
 - ⚡️ 零配置，开箱即用
 - 👏 支持Vue和React项目的调试和构建
 - 📤 支持单页面和多页面
-- 💪 提供三种构建场景: 本地开发调试模式(包含热更新、接口代理等功能)、构建生产环境代码、library库的构建(支持umd和esm的打包能力)
-- ❤️ 开放配置能力: 可配置构建入口文件、是否开启ESLint代码规范检测、接口代理配置等
+- 💪 提供三种构建场景: 本地开发模式(包含热更新、接口代理等功能)、生产环境代码构建、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项目模板
@@ -245,7 +246,43 @@ module.exports = {
 }
 ```
 
-7. 项目源码环境变量批量替换
+7. 打包忽略node_modules配置项: ignoreNodeModules（默认为false）
+> 打包过程中，忽略node_modules中的依赖文件，不注入到bundle中，减少最后生成代码体积
+```bash
+module.exports = {
+  ...
+  webpack: {
+    ignoreNodeModules: true,
+  }
+  ...
+}
+```
+
+8. 是否生成ts声明文件配置项: createDeclaration（默认为false）
+> 构建ts项目中，可以选择是否生成ts声明文件
+```bash
+module.exports = {
+  ...
+  webpack: {
+    createDeclaration: true,
+  }
+  ...
+}
+```
+
+9. 配置项目源码目录（工程有效目录范围）: projectDir
+> 构建项目中，设置生效的目录（可同时设置多个目录），用于提高前端工程执行效率。可以不配置，默认为['./src']
+```bash
+module.exports = {
+  ...
+  webpack: {
+    projectDir: ['./src'],
+  }
+  ...
+}
+```
+
+10. 项目源码环境变量批量替换
 > [关于params-replace-loader的使用方法](https://www.npmjs.com/package/params-replace-loader)
 ```bash
 module.exports = {
@@ -264,7 +301,7 @@ module.exports = {
 }
 ```
 
-7. 接口代理配置：目前只有dev本地开发调试模式下会启动
+11. 接口代理配置：目前只有dev本地开发调试模式下会启动
 > [关于proxyTable的配置方法](https://www.webpackjs.com/configuration/dev-server/#devserver-proxy)
 ```bash
 module.exports = {
@@ -277,7 +314,7 @@ module.exports = {
 }
 ```
 
-8、用于开启本地调试模式的相关配置信息
+12. 用于开启本地调试模式的相关配置信息
 ```bash
 module.exports = {
   ...
@@ -301,7 +338,7 @@ module.exports = {
 }
 ```
 
-9、用于构建生产环境代码的相关配置信息
+13. 用于构建生产环境代码的相关配置信息
 ```bash
 module.exports = {
   ...
@@ -319,7 +356,7 @@ module.exports = {
 }
 ```
 
-10、用于构建第三方功能包的配置（以umd格式输出）
+14. 用于构建第三方功能包的配置（以umd格式输出）
 ```bash
 module.exports = {
   ...
@@ -338,7 +375,7 @@ module.exports = {
 }
 ```
 
-11、用于构建esm格式的第三方功能包配置
+15. 用于构建esm格式的第三方功能包配置
 ```bash
 module.exports = {
   ...

package/module/index.js

@@ -137,7 +137,7 @@ let argv = yargs
         .alias('h', 'help');
     },
     (argv) => {
-      mainAction.build();
+      mainAction.build('prod');
     },
   )
   .command(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfun",
-  "version": "1.5.13",
+  "version": "1.5.18",
   "description": "前端脚手架：支持Vue技术栈和react技术栈",
   "keywords": [
     "前端工程",
@@ -10,7 +10,7 @@
     "vue项目脚手架",
     "lib库构建工具"
   ],
-  "author": "ldan@wibetter",
+  "author": "wibetter",
   "license": "MIT",
   "bin": {
     "akfun": "./bin/akfun.js"
@@ -152,7 +152,8 @@
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^4.2.2",
-    "yargs": "^12.0.2"
+    "yargs": "^12.0.2",
+    "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",

package/src/build.js

@@ -4,10 +4,15 @@ const path = require('path');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const checkVersion = require('./check-versions');
-const config = require('./config/index'); // 引入当前项目配置文件
+const projectConfig = require('./config/index'); // 引入当前项目配置文件
+const deepMergeConfig = require('./utils/deepMergeConfig');
 
 // 构建脚本：一般用于构建生产环境的代码
-module.exports = function (BuildType) {
+module.exports = function (BuildType, akfunConfig) {
+  let config = projectConfig; // 默认使用执行命令目录下的配置数据
+  if (akfunConfig) {
+    config = deepMergeConfig(defaultConfig, akfunConfig);
+  }
   // 检查当前npm版本号是否匹配
   checkVersion();
   const spinner = ora('[akfun]开启AKFun构建能力...').start();
@@ -16,10 +21,10 @@ module.exports = function (BuildType) {
   // 根据BuildType判断是否引用专用于第三方功能包的webpack配置
   if (BuildType && BuildType === 'lib') {
     spinner.start('[akfun]开始构建第三方功能包...');
-    webpackConfig = require('./webpack/webpack.library.conf')();
+    webpackConfig = require('./webpack/webpack.library.conf')(config);
   } else {
     spinner.start('[akfun]开始构建生产环境的代码...');
-    webpackConfig = require('./webpack/webpack.prod.conf')();
+    webpackConfig = require('./webpack/webpack.prod.conf')(config);
   }
 
   /**

package/src/config/default.config.js

@@ -0,0 +1,102 @@
+'use strict';
+// 统一路径解析：
+const { resolve } = require('../utils/pathUtils');
+
+/**
+ * akfun脚手架赋予当前项目的默认配置
+ */
+const defaultAKFunConfig = {
+  settings: {
+    enableESLint: false, // 是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: false, // 是否ESLint自动修正代码格式
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    resolve: {
+      // webpack的resolve配置
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      alias: {
+        '@': resolve('src'),
+        $components: resolve('src/components'),
+        $pages: resolve('src/pages'),
+        $plugins: resolve('src/plugins'),
+        $utils: resolve('src/utils')
+      }
+    },
+    createDeclaration: false, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
+    externals: [], // 从输出的 bundle 中排除依赖
+    sassResources: []
+  },
+  envParams: {
+    // 项目系统环境变量
+    common: {
+      // 通用参数
+      '#version#': '20200810.1'
+    },
+    local: {
+      // 本地开发环境
+      '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址
+      '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址
+      '#routeBasePath#': '/' // 路由根地址
+    },
+    online: {
+      // 线上正式环境配置参数
+      '#dataApiBase#': '/', // 数据接口根地址 "//xxx.cn/"格式
+      '#assetsPublicPath#': '', // 静态资源根地址 "//xxx.cn/_spa/projectName"格式
+      '#routeBasePath#': '/' // 路由根地址 "/_spa/projectName/"格式
+    }
+  },
+  dev: {
+    // 用于开启本地调试模式的相关配置信息
+    NODE_ENV: 'development',
+    port: 80,
+    autoOpenBrowser: true,
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {},
+    /** CSS Sourcemaps off by default because relative paths are "buggy"
+     * with this option, according to the CSS-Loader README
+     * (https://github.com/webpack/css-loader#sourcemaps)
+     * In our experience, they generally work as expected,
+     * just be aware of this issue when enabling this option.
+     */
+    cssSourceMap: false
+  },
+  build: {
+    // 用于构建生产环境代码的相关配置信息
+    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
+    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false,
+    // Gzip off by default as many popular public hosts such as
+    // Surge or Netlify already gzip all public assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'json'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: false
+  },
+  build2lib: {
+    // 用于构建第三方功能包的配置文件
+    NODE_ENV: 'production',
+    libraryName: '', // 构建第三方功能包时最后导出的引用变量名
+    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '', // 资源引用二级路径
+    productionSourceMap: false,
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'json'],
+    bundleAnalyzerReport: false
+  }
+};
+
+// 备注：数组类型则直接覆盖
+module.exports = defaultAKFunConfig;

package/src/config/index.js

@@ -1,108 +1,16 @@
 'use strict';
-const deepMerge = require('deepmerge');
 // 统一路径解析：
 const { resolve } = require('../utils/pathUtils');
+const defaultAKFunConfig = require('./default.config');
 const getConfigObj = require('../utils/getConfigObj');
+const deepMergeConfig = require('../utils/deepMergeConfig');
 
 /** akfun脚手架赋予当前项目的默认配置
  * 备注：项目根目录的akfun.config.js的配置内容优先级高于defultAKFunConfig
  */
-const defultAKFunConfig = {
-  settings: {
-    enableESLint: false, // 是否开启ESLint，默认开启ESLint检测代码格式
-    enableESLintFix: false, // 是否ESLint自动修正代码格式
-    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
-    enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式
-  },
-  webpack: {
-    resolve: {
-      // webpack的resolve配置
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
-      alias: {
-        '@': resolve('src'),
-        $components: resolve('src/components'),
-        $pages: resolve('src/pages'),
-        $plugins: resolve('src/plugins'),
-        $utils: resolve('src/utils')
-      }
-    },
-    externals: [], // 从输出的 bundle 中排除依赖
-    sassResources: []
-  },
-  envParams: {
-    // 项目系统环境变量
-    common: {
-      // 通用参数
-      '#version#': '20200810.1'
-    },
-    local: {
-      // 本地开发环境
-      '#dataApiBase#': 'http://localhost:1024', // 数据接口根地址
-      '#assetsPublicPath#': 'http://localhost:1024', // 静态资源根地址
-      '#routeBasePath#': '/' // 路由根地址
-    },
-    online: {
-      // 线上正式环境配置参数
-      '#dataApiBase#': '/', // 数据接口根地址 "//xxx.cn/"格式
-      '#assetsPublicPath#': '', // 静态资源根地址 "//xxx.cn/_spa/projectName"格式
-      '#routeBasePath#': '/' // 路由根地址 "/_spa/projectName/"格式
-    }
-  },
-  dev: {
-    // 用于开启本地调试模式的相关配置信息
-    NODE_ENV: 'development',
-    port: 80,
-    autoOpenBrowser: true,
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '',
-    hostname: 'localhost',
-    proxyTable: {},
-    /** CSS Sourcemaps off by default because relative paths are "buggy"
-     * with this option, according to the CSS-Loader README
-     * (https://github.com/webpack/css-loader#sourcemaps)
-     * In our experience, they generally work as expected,
-     * just be aware of this issue when enabling this option.
-     */
-    cssSourceMap: false
-  },
-  build: {
-    // 用于构建生产环境代码的相关配置信息
-    NODE_ENV: 'production', // production 模式，会启动UglifyJsPlugin服务
-    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '', // 资源引用二级路径
-    productionSourceMap: false,
-    // Gzip off by default as many popular public hosts such as
-    // Surge or Netlify already gzip all public assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css', 'json'],
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: false
-  },
-  build2lib: {
-    // 用于构建第三方功能包的配置文件
-    NODE_ENV: 'production',
-    libraryName: '', // 构建第三方功能包时最后导出的引用变量名
-    assetsRoot: resolve('dist'), // 编译完成的文件存放路径
-    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
-    assetsSubDirectory: '', // 资源引用二级路径
-    productionSourceMap: false,
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css', 'json'],
-    bundleAnalyzerReport: false
-  }
-};
 
 // 从项目根目录获取当前项目的配置文件
-const curProjectConfg = getConfigObj(resolve('akfun.config.js'));
+const curProjectConfig = getConfigObj(resolve('akfun.config.js'));
 
-// module.exports = Object.assign(defultAKFunConfig, curProjectConfg);
-
-const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray;
 // 备注：数组类型则直接覆盖
-module.exports = deepMerge(defultAKFunConfig, curProjectConfg, { arrayMerge: overwriteMerge });
+module.exports = deepMergeConfig(defaultAKFunConfig, curProjectConfig);

package/src/dev-server.js

@@ -7,11 +7,17 @@ const checkVersion = require('./check-versions');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const { resolve } = require('./utils/pathUtils');
 // 引入当前项目配置文件
-const config = require('./config/index');
+const projectConfig = require('./config/index');
+const defaultConfig = require('./config/default.config');
 const getDevWebpackConfig = require('./webpack/webpack.dev.conf');
+const deepMergeConfig = require('./utils/deepMergeConfig');
 
 // 构建脚本：一般用于构建开发环境的代码（包含热更新、接口代理等功能）
-module.exports = function () {
+module.exports = function (akfunConfig) {
+  let config = projectConfig; // 默认使用执行命令目录下的配置数据
+  if (akfunConfig) {
+    config = deepMergeConfig(defaultConfig, akfunConfig);
+  }
   // 检查当前npm版本号是否匹配
   checkVersion();
   const spinner = ora('[akfun]开启调试模式...').start();
@@ -35,7 +41,7 @@ module.exports = function () {
   // 使用 express 启动一个服务
   const app = express();
   // 获取开发环境的webpack基本配置
-  const webpackConfig = getDevWebpackConfig();
+  const webpackConfig = getDevWebpackConfig(config);
   const compiler = webpack(webpackConfig); // 启动 webpack 进行编译
 
   // 启动 webpack-dev-middleware，将编译后的文件暂存到内存中

package/src/utils/deepMergeConfig.js

@@ -0,0 +1,9 @@
+const deepMerge = require('deepmerge');
+
+const deepMergeConfig = function (defaultConfig, curConfig) {
+  const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray;
+  
+  return deepMerge(defaultConfig, curConfig, { arrayMerge: overwriteMerge });
+};
+
+module.exports = deepMergeConfig;

package/src/utils/getConfigObj.js

@@ -2,7 +2,7 @@ const glob = require('glob');
 
 const fileExists = function (fileDir) {
   let exists = false;
-  const files = glob.sync(fileDir);
+  const files = glob.sync(fileDir); // 同步读取本地文件
   if (files.length > 0) {
     exists = true;
   }

package/src/utils/getProjectDir.js

@@ -0,0 +1,16 @@
+const { resolveToCurrentRoot } = require('./pathUtils');
+const { isArray, isString } = require('../utils/typeof');
+
+module.exports = (_projectDir) => {
+  const curProjectDir = [];
+  if (!_projectDir) {
+    curProjectDir.push(resolveToCurrentRoot('./src'));
+  } else if (isArray(_projectDir)) {
+    _projectDir.forEach((dir) => {
+      curProjectDir.push(resolveToCurrentRoot(dir));
+    });
+  } else if (isString(_projectDir)) {
+    curProjectDir.push(resolveToCurrentRoot(_projectDir));
+  }
+  return curProjectDir;
+};

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

@@ -7,6 +7,7 @@ const utils = require('./loaderUtils');
 const vueLoaderConfig = require('./vue-loader.conf');
 const { resolve, resolveToCurrentRoot, catchCurPackageJson } = require('../utils/pathUtils');
 const getConfigObj = require('../utils/getConfigObj');
+const getProjectDir = require('../utils/getProjectDir');
 const catchVuePages = require('../utils/catchVuePages'); // 用于获取当前项目中的vue单文件
 // 引入当前项目配置文件
 const config = require('../config/index');
@@ -28,7 +29,14 @@ const BannerPack = new webpack.BannerPlugin({
   entryOnly: true // 只在入口 chunks 文件中添加
 });
 
-module.exports = () => {
+/**
+ * webpack.base.conf.js
+ * 主要用于设置 rules 和 通用插件
+ */
+module.exports = (option) => {
+  const curEnvConfig = option || {}; // 用于接收当前运行环境配置变量
+  // 获取当前项目目录
+  const curProjectDir = getProjectDir(config.webpack.projectDir);
   const webpackConfig = {
     entry: config.webpack.entry,
     /*
@@ -66,11 +74,17 @@ module.exports = () => {
               options: babelConfig
             },
             {
-              loader: 'ts-loader'
-              // options: { configFile: path.resolve(__dirname, '../config/tsconfig.json') }
+              loader: 'ts-loader',
+              options: {
+                // configFile: path.resolve(__dirname, '../config/tsconfig.json')
+                compilerOptions: {
+                  declaration: config.webpack.createDeclaration || false,
+                  outDir: curEnvConfig.assetsRoot || './dist'
+                }
+              }
             }
           ],
-          include: [resolve('src')],
+          include: curProjectDir, // [resolve('src')],
           exclude: /node_modules/
         },
         {
@@ -81,7 +95,7 @@ module.exports = () => {
               options: babelConfig
             }
           ],
-          include: [resolve('src')],
+          include: curProjectDir, // [resolve('src')],
           exclude: /node_modules/
         },
         {
@@ -123,7 +137,7 @@ module.exports = () => {
         {
           test: /\.(js|ts|tsx|jsx|vue|css|html)$/,
           loader: 'params-replace-loader',
-          include: [resolve('src')],
+          include: curProjectDir, // [resolve('src')],
           exclude: [/node_modules/, resolve('src/mock/data')], // 排除不需要进行校验的文件夹
           options: config.envParams
         }
@@ -135,7 +149,6 @@ module.exports = () => {
       new VueLoaderPlugin()
     ]
   };
-
   // 是否开启ESLint
   if (config.settings.enableESLint) {
     // ts类型
@@ -143,7 +156,7 @@ module.exports = () => {
       test: /\.tsx?$/,
       loader: 'eslint-loader',
       enforce: 'pre',
-      include: [resolve('src')],
+      include: curProjectDir, // [resolve('src')],
       exclude: /node_modules/,
       options: {
         cache: true,
@@ -157,7 +170,7 @@ module.exports = () => {
       test: /\.jsx?$/,
       loader: 'eslint-loader',
       enforce: 'pre',
-      include: [resolve('src')],
+      include: curProjectDir, // [resolve('src')],
       exclude: /node_modules/,
       options: {
         cache: true, // the cache is written to the ./node_modules/.cache/eslint-loader director
@@ -171,7 +184,7 @@ module.exports = () => {
       test: /\.vue$/,
       loader: 'eslint-loader',
       enforce: 'pre',
-      include: [resolve('src')],
+      include: curProjectDir, // [resolve('src')],
       exclude: /node_modules/,
       options: {
         cache: true,

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

@@ -6,15 +6,17 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const utils = require('./loaderUtils');
 // 引入当前项目配置文件
-const config = require('../config/index');
+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 = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  const curEnvConfig = config.dev || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig();
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);
 
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
@@ -23,21 +25,21 @@ module.exports = () => {
   }
 
   const webpackDevConfig = merge(baseWebpackConfig, {
-    mode: config.dev.NODE_ENV, // development模式，会启动NamedChunksPlugin、NamedModulesPlugin服务
+    mode: curEnvConfig.NODE_ENV, // development模式，会启动NamedChunksPlugin、NamedModulesPlugin服务
     output: {
-      publicPath: config.dev.assetsPublicPath // 引用地址：配置发布到线上资源的URL前缀
+      publicPath: curEnvConfig.assetsPublicPath // 引用地址：配置发布到线上资源的URL前缀
     },
     module: {
       rules: utils.styleLoaders({
-        sourceMap: config.dev.cssSourceMap,
+        sourceMap: curEnvConfig.cssSourceMap,
         environment: 'dev'
       })
     },
     // cheap-module-eval-source-map is faster for development
-    devtool: '#cheap-module-eval-source-map',
+    devtool: '#source-map', // '#cheap-module-eval-source-map',
     plugins: [
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(config.dev.NODE_ENV) // vue-router中根据此变量判断执行环境
+        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV) // vue-router中根据此变量判断执行环境
       }),
       // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
       new webpack.HotModuleReplacementPlugin(),
@@ -48,8 +50,8 @@ module.exports = () => {
   });
 
   // 集成dev配置中的构建入口（优先级高于config.webpack.entry）
-  if (config.dev.entry) {
-    webpackDevConfig.entry = config.dev.entry; // 备注：会覆盖config.webpack.entry的配置
+  if (curEnvConfig.entry) {
+    webpackDevConfig.entry = curEnvConfig.entry; // 备注：会覆盖config.webpack.entry的配置
   }
 
   // 多页面多模板支持能力

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

@@ -6,40 +6,47 @@ 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');
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
-module.exports = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  const curEnvConfig = config.build2lib || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig();
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);
 
   const webpackLibConfig = merge(baseWebpackConfig, {
-    mode: config.build2lib.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
+    mode: curEnvConfig.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
     output: {
-      path: config.build2lib.assetsRoot, // 输出文件的存放在本地的目录
+      path: curEnvConfig.assetsRoot, // 输出文件的存放在本地的目录
       filename: '[name].umd.js',
       publicPath: '',
-      library: config.build2lib.libraryName, // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
+      library: curEnvConfig.libraryName, // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
       globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
       libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
     },
     module: {
       rules: utils.styleLoaders({
-        sourceMap: config.build2lib.productionSourceMap,
+        sourceMap: curEnvConfig.productionSourceMap,
         environment: 'prod'
       })
     },
-    devtool: config.build2lib.productionSourceMap ? '#source-map' : false, // '#source-map': 源码，false：压缩代码
-    externals: config.webpack.externals,
+    devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // '#source-map': 源码，false：压缩代码
+    externals: config.webpack.ignoreNodeModules
+      ? [nodeExternals()].concat(config.webpack.externals)
+      : config.webpack.externals,
     plugins: [
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(config.build2lib.NODE_ENV)
+        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV)
       }),
       new MiniCssExtractPlugin({
-        filename: utils.assetsPath('index.css'),
+        // filename: utils.assetsPath('index.css'),
+        filename: "[name].css",
+        chunkFilename: "[id].css",
         ignoreOrder: false
       }),
       new OptimizeCSSPlugin({
@@ -53,10 +60,10 @@ module.exports = () => {
   });
 
   // 是否开启Gzip
-  if (config.build2lib.productionGzip) {
+  if (curEnvConfig.productionGzip) {
     webpackLibConfig.plugins.push(
       new CompressionWebpackPlugin({
-        test: new RegExp(`\\.(${config.build2lib.productionGzipExtensions.join('|')})$`),
+        test: new RegExp(`\\.(${curEnvConfig.productionGzipExtensions.join('|')})$`),
         filename: '[path].gz[query]',
         algorithm: 'gzip',
         threshold: 240,
@@ -65,13 +72,13 @@ module.exports = () => {
     );
   }
 
-  if (config.build2lib.bundleAnalyzerReport) {
+  if (curEnvConfig.bundleAnalyzerReport) {
     webpackLibConfig.plugins.push(new BundleAnalyzerPlugin());
   }
 
   // 集成构建入口相关的配置
-  if (config.build2lib.entry) {
-    webpackLibConfig.entry = config.build2lib.entry; // 会覆盖config.webpack.entry的配置
+  if (curEnvConfig.entry) {
+    webpackLibConfig.entry = curEnvConfig.entry; // 会覆盖config.webpack.entry的配置
   }
 
   return webpackLibConfig;

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

@@ -10,6 +10,7 @@ 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 utils = require('./loaderUtils');
 const { resolve } = require('../utils/pathUtils'); // 统一路径解析
@@ -17,12 +18,14 @@ const getJsEntries = require('../utils/jsEntries');
 const entrys2htmlWebpackPlugin = require('../utils/entrys2htmlWebpackPlugin');
 const { isArray } = require('../utils/typeof');
 // 引入当前项目配置文件
-const config = require('../config/index');
+const projectConfig = require('../config/index');
 const getBaseWebpackConfig = require('./webpack.base.conf');
 
-module.exports = () => {
+module.exports = (akfunConfig) => {
+  let config = akfunConfig || projectConfig; // 默认使用执行命令目录下的配置数据
+  const curEnvConfig = config.build || {}; // 当前执行环境配置
   // 获取webpack基本配置
-  const baseWebpackConfig = getBaseWebpackConfig();
+  const baseWebpackConfig = getBaseWebpackConfig(curEnvConfig);
   // 获取页面模板地址
   let curHtmlTemplate = path.resolve(__dirname, '../initData/template/index.html');
   if (config.webpack.template) {
@@ -30,21 +33,32 @@ module.exports = () => {
   }
 
   const webpackProdConfig = merge(baseWebpackConfig, {
-    mode: config.build2lib.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
+    mode: curEnvConfig.NODE_ENV, // production 模式，会启动UglifyJsPlugin服务
+    /*
+     内置变量列表：
+     id: chunk的唯一标识，从0开始；
+     name: chunk的名称；
+     hash: chunk的唯一标识的Hash值；
+     chunkhash: chunk内容的Hash值；
+     其中hash和chunkhash的长度是可以指定的，[hash:8]代表取8位的Hash值，默认是20位。
+     */
     output: {
-      path: config.build.assetsRoot, // 输出文件的存放在本地的目录
-      publicPath: config.build.assetsPublicPath, // 引用地址：配置发布到线上资源的URL前缀
+      path: curEnvConfig.assetsRoot, // 输出文件的存放在本地的目录
+      publicPath: curEnvConfig.assetsPublicPath, // 引用地址：配置发布到线上资源的URL前缀
       filename: utils.assetsPath('scripts/chunk/[name].[contenthash:8].js'),
       chunkFilename: utils.assetsPath('scripts/chunk/[name].[contenthash:8].js')
     },
     module: {
       rules: utils.styleLoaders({
-        sourceMap: config.build.productionSourceMap,
+        sourceMap: curEnvConfig.productionSourceMap,
         environment: 'prod'
       })
     },
+    externals: config.webpack.ignoreNodeModules
+      ? [nodeExternals()].concat(config.webpack.externals)
+      : config.webpack.externals,
     // devtool: '#cheap-module-eval-source-map', // 本地开发环境中的取值
-    devtool: config.build.productionSourceMap ? '#source-map' : false, // 线上开发环境中的取值
+    devtool: curEnvConfig.productionSourceMap ? '#source-map' : false, // 线上开发环境中的取值
     optimization: {
       splitChunks: {
         cacheGroups: {
@@ -67,7 +81,7 @@ module.exports = () => {
     plugins: [
       // http://vuejs.github.io/vue-loader/en/workflow/production.html
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(config.build.NODE_ENV) // vue-router中根据此变量判断执行环境
+        'process.env.NODE_ENV': JSON.stringify(curEnvConfig.NODE_ENV) // vue-router中根据此变量判断执行环境
       }),
       new MiniCssExtractPlugin({
         filename: utils.assetsPath('css/[name].[contenthash:8].css'),
@@ -94,9 +108,9 @@ module.exports = () => {
   });
 
   // 集成build配置中的构建入口
-  if (config.build.entry) {
+  if (curEnvConfig.entry) {
     // 会覆盖config.webpack.entry的配置
-    webpackProdConfig.entry = config.build.entry;
+    webpackProdConfig.entry = curEnvConfig.entry;
   }
 
   // 多页面支持能力
@@ -143,7 +157,7 @@ module.exports = () => {
         patterns: [
           {
             from: resolve('public'), // 从这里拷贝
-            to: config.build.assetsSubDirectory // 将根目录下的public内的资源复制到指定文件夹
+            to: curEnvConfig.assetsSubDirectory // 将根目录下的public内的资源复制到指定文件夹
           }
         ]
       })
@@ -151,10 +165,10 @@ module.exports = () => {
   }
 
   // 是否要进行压缩工作
-  if (config.build.productionGzip) {
+  if (curEnvConfig.productionGzip) {
     webpackProdConfig.plugins.push(
       new CompressionWebpackPlugin({
-        test: new RegExp(`\\.(${config.build.productionGzipExtensions.join('|')})$`),
+        test: new RegExp(`\\.(${curEnvConfig.productionGzipExtensions.join('|')})$`),
         filename: '[path].gz[query]',
         algorithm: 'gzip',
         threshold: 240,
@@ -163,7 +177,7 @@ module.exports = () => {
     );
   }
 
-  if (config.build.bundleAnalyzerReport) {
+  if (curEnvConfig.bundleAnalyzerReport) {
     webpackProdConfig.plugins.push(new BundleAnalyzerPlugin());
   }