akfun 2.0.1 → 2.0.6

package/package.json

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

package/src/dev-server.js

@@ -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) {
@@ -112,11 +112,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}.html\n当前运行样式[可能不存在]:\n${projPath}${filename}.css`
+          );
+          opn(`${projPath}${filename}.html`);
+        }
       }
       server = app.listen(port);
       _resolve();

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

@@ -15,7 +15,7 @@ const catchVuePages = require('../utils/catchVuePages'); // 用于获取当前
 // 引入当前项目配置文件
 const projectConfig = require('../config/index');
 const babelConfig = require('../config/babel.config'); // Babel的配置文件
-const {buildBanner} = require("../utils/akfunParams");
+const { buildBanner } = require('../utils/akfunParams');
 const getJsEntries = require('../utils/jsEntries');
 const { isArray } = require('../utils/typeof');
 
@@ -38,6 +38,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'], // 使用共同的特性子集
@@ -58,9 +63,12 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
      */
     resolve: curWebpackConfig.resolve,
     externals: curWebpackConfig.ignoreNodeModules
-      ? [nodeExternals({
-        allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
-      })].concat(curWebpackConfig.externals)
+      ? [
+          nodeExternals({
+            importType: 'commonjs',
+            allowlist: curWebpackConfig.allowList ? curWebpackConfig.allowList : []
+          })
+        ].concat(curWebpackConfig.externals)
       : curWebpackConfig.externals,
     module: {
       rules: [
@@ -166,9 +174,14 @@ module.exports = (_curEnvConfig, _akfunConfig) => {
   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;
+    webpackConfig.externals = curEnvConfig.ignoreNodeModules
+      ? [
+          nodeExternals({
+            importType: 'commonjs',
+            allowlist: allowList || []
+          })
+        ].concat(externals)
+      : externals;
   }
   // 集成构建入口相关的配置（优先级更高）
   if (curEnvConfig.entry) {

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

@@ -6,6 +6,8 @@ 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,35 +29,29 @@ 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,
-      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
-          }
-        }
-      }
+      emitOnErrors: true
     },
     plugins: [
       // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
       new webpack.HotModuleReplacementPlugin(),
+      new MiniCssExtractPlugin({
+        // filename: utils.assetsPath('index.css'),
+        filename: '[name].css',
+        chunkFilename: '[name].css',
+        ignoreOrder: false
+      }),
+      new OptimizeCSSPlugin({
+        cssProcessorOptions: {
+          safe: true
+        }
+      })
     ]
   });
 
@@ -68,7 +64,7 @@ module.exports = (akfunConfig) => {
   // 开启热更新能力
   const devClientPath = path.resolve(__dirname, '../dev-client'); // 从akfun中获取
   // add hot-reload related code to entry chunks
-  if (webpackDevConfig.entry) {
+  if (!curEnvConfig.closeHotReload && webpackDevConfig.entry) {
     Object.keys(webpackDevConfig.entry).forEach((name) => {
       webpackDevConfig.entry[name] = [devClientPath].concat(webpackDevConfig.entry[name]);
     });

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

@@ -19,14 +19,14 @@ 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和全局变量使用
-        name: curEnvConfig.libraryName,
+        name: curEnvConfig.libraryName
       },
       // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
-      globalObject: 'this', // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
+      globalObject: 'this' // 定义全局变量,兼容node和浏览器运行，避免出现"window is not defined"的情况
     },
     module: {
       rules: utils.styleLoaders({
@@ -34,7 +34,7 @@ module.exports = (akfunConfig) => {
         environment: 'prod'
       })
     },
-    devtool:  curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
+    devtool: curEnvConfig.productionSourceMap ? curEnvConfig.devtool || 'source-map' : false, // 线上生成环境
     optimization: {
       /**
        *  named 对调试更友好的可读的 id。
@@ -46,15 +46,15 @@ module.exports = (akfunConfig) => {
     plugins: [
       new MiniCssExtractPlugin({
         // filename: utils.assetsPath('index.css'),
-        filename: "[name].css",
-        chunkFilename: "[name].css",
+        filename: '[name].css',
+        chunkFilename: '[name].css',
         ignoreOrder: false
       }),
       new OptimizeCSSPlugin({
         cssProcessorOptions: {
           safe: true
         }
-      }),
+      })
     ]
   });
 

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

@@ -55,7 +55,8 @@ module.exports = (akfunConfig) => {
       emitOnErrors: true,
       splitChunks: {
         cacheGroups: {
-          defaultVendors: { // 4.0: vendors
+          defaultVendors: {
+            // 4.0: vendors
             test: /node_modules\/(.*)/,
             name: 'vendor',
             chunks: 'initial',
@@ -90,7 +91,7 @@ module.exports = (akfunConfig) => {
         cssProcessorOptions: {
           safe: true
         }
-      }),
+      })
     ]
   });
 
@@ -128,7 +129,7 @@ module.exports = (akfunConfig) => {
       })
     );
   }
-  
+
   // 是否开启
   if (curEnvConfig.openMonacoWebpackPlugin) {
     webpackProdConfig.plugins.push(new MonacoWebpackPlugin());