kn-cli 1.0.17 → 1.0.19

package/build/webpack.config.js

@@ -1,9 +1,6 @@
 const path = require('path');
 const fs = require('fs');
-
 const webpack = require('webpack');
-const API_CONFIG = require('./webpack.api.js');
-
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -11,38 +8,16 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 
-let CLI_CONFIG = {};
-// const PrerenderSPAPlugin = require('prerender-spa-plugin');
-// const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
+//////////// CONFIG ENV ///////////////
+const API_CONFIG = require('./webpack.api.js');
+const cliConfig = require('./cli.config.js');
+let CLI_CONFIG = {};
 let existsCli= fs.existsSync('./cli.config.js');
 if(existsCli){
   CLI_CONFIG = require('./cli.config.js');
 }
 
-let otherPlugins = [];
-if (process.env.npm_config_report) {
-  otherPlugins.push(new BundleAnalyzerPlugin());
-}
-// if(process.env.npm_config_snap){
-//   otherPlugins.pish(new PrerenderSPAPlugin({
-//     //代码打包目录和以前配置的目录保持一致
-//     staticDir: path.join(dirname, packageDist), 
-//     outputDir: path.join(dirname, 'prerendered'),
-//     //routes：要预渲染的页面访问路由
-//     routes: ['/','/about' ],
-//     renderer: new Renderer({
-//       // renderAfterDocumentEvent: 'render-event',//等待页面发送render-event消息后开始渲染
-//       renderAfterTime:2000,//页面加载后2000毫秒后开始渲染
-//       injectProperty: '__PRERENDER_INJECTED',
-//         inject: {
-//           foo: 'bar'
-//         },
-//         // headless：渲染时显示浏览器窗口。对调试很有用。
-//         headless: true
-//     }),
-//   }))
-// }
 const dirname = __dirname;
 const webpackPath=__webpackPath;
 console.log(`=====================env=========================`);
@@ -55,14 +30,37 @@ console.log(path.resolve(dirname,'node_modules'));
 console.log(`=====================env end=========================`);
 
 const devMode = process.env.build_env !== 'prod';
-const hashMode = process.env.build_env != 'localdebug';
-
+const hashMode = CLI_CONFIG?.hashMode ?? process.env.build_env != 'localdebug';
+const cssSplitMode = CLI_CONFIG?.cssSplitMode??true;
 const resource_path_relative='';
-
-if (!devMode) {
-  otherPlugins.push(new webpack.optimize.ModuleConcatenationPlugin());
+const support_sass=CLI_CONFIG?.sass??false;
+const css_modules= CLI_CONFIG?.cssModule??'local';
+const jsSplitMode = CLI_CONFIG?.jsSplitMode??true;
+let distFolder = 'dist';
+let distJsFolder='';
+if(CLI_CONFIG?.dist){
+  if(typeof CLI_CONFIG.dist == 'string'){
+    distFolder = CLI_CONFIG.dist;
+  }else{
+    if(CLI_CONFIG.dist.base){
+      distFolder = CLI_CONFIG.dist.base;
+    }
+    if(CLI_CONFIG.dist.js){
+      distJsFolder = CLI_CONFIG.dist.js;
+    }
+  }
 }
 
+//////////// CONFIG ENV-END ///////////////
+
+
+//////////// DEFINE ////////////////
+let apiKeys = Object.keys(API_CONFIG.API_HOSTS);
+let API_HOST={};
+apiKeys.map(key=>{
+  API_HOST[key] = JSON.stringify(API_CONFIG.API_HOSTS[key])
+});
+
 let Alias = {};
 // if(devMode){
 //   Alias = {
@@ -70,19 +68,343 @@ let Alias = {};
 //     'scheduler/tracing': 'scheduler/tracing-profiling'
 //   }
 // }
+//////////// DEFINE-END ////////////////
 
 
-let apiKeys = Object.keys(API_CONFIG.API_HOSTS);
-let API_HOST={};
-apiKeys.map(key=>{
-  API_HOST[key] = JSON.stringify(API_CONFIG.API_HOSTS[key])
-});
+////////////// ENTRY ///////////////
+let entry={
+  index: [
+    // '@babel/polyfill',
+    path.resolve(dirname, 'src/index'),
+  ],
+};
+
+if(CLI_CONFIG?.entry){
+  let newEntry={};
+  for(let key in CLI_CONFIG.entry){
+    newEntry[key] = path.resolve(dirname,CLI_CONFIG.entry[key])
+  }
+  entry = newEntry;
+}
+////////////// ENTRY-END ///////////////
+
+
+/////////////// RULES ////////////////
+const rules= [
+  {
+    test: /\.js[x]?$/,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            '@babel/preset-react',
+            [
+              '@babel/preset-env',
+              {
+                targets: devMode
+                  ? { chrome: '90' }
+                  : {
+                      chrome: '40',
+                      ie: '11',
+                    },
+              },
+            ],
+          ],
+          plugins: [
+            ['@babel/plugin-transform-runtime', { corejs: 3 }],
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            ['@babel/plugin-proposal-decorators', { legacy: true }],
+            ['@babel/plugin-proposal-private-methods', { loose: true }],
+            ['@babel/plugin-proposal-class-properties', { loose: true }],
+            // ["import", {
+            //   style: false,//"css",
+            //   libraryName: "kn-hooks" ,
+            //   libraryDirectory:"src",
+            //   camel2DashComponentName:false,
+            // }],
+            // ["import", {
+            //   style: true,//"css",
+            //   libraryDirectory:"",
+            //   libraryName: "antd" ,
+            // }]
+          ],
+        },
+      },
+    ],
+  },
+  // {
+  //   test: /\.json$/,
+  //   use: 'json-loader'
+  // },
+  {
+    test: /\.js[x]?$/,
+    include: /kn-hooks/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            '@babel/preset-react',
+            [
+              '@babel/preset-env',
+              {
+                targets: devMode
+                  ? { chrome: '80' }
+                  : {
+                      chrome: '40',
+                      ie: '11',
+                    },
+              },
+            ],
+          ],
+          plugins: [
+            ['@babel/plugin-transform-runtime', { corejs: 3 }],
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            ['@babel/plugin-proposal-decorators', { legacy: true }],
+            ['@babel/plugin-proposal-private-methods', { loose: true }],
+            ['@babel/plugin-proposal-class-properties', { loose: true }],
+          ],
+        },
+      },
+    ],
+  },
+  {
+    test: /\.(jpg|png|gif|svg)$/,
+    loader: 'url-loader',
+    options: {
+      limit: 1024 * 5,
+      name: `assets/[name].[hash:8].[ext]`,
+    },
+  },
+  {
+    test: /\.(ttf|eot|woff|woff2)$/,
+    loader: 'file-loader',
+    options: {
+      name: `assets/font/[name].[hash:8].[ext]`,
+    },
+  },
+  {
+    test: /\.less$/i,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: cssSplitMode?MiniCssExtractPlugin.loader:'style-loader',
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: 2,
+          modules: {
+            localIdentName: '[local]--[hash:base64:5]' ,
+            mode:css_modules||'global'
+          }
+        },
+      },
+      'postcss-loader',
+      {
+        loader: 'less-loader',
+        options:{
+          javascriptEnabled: CLI_CONFIG?.less?.javascriptEnabled??false
+        }
+      }
+    ],
+  },
+  {
+    test: /\.css$/i,
+    use: [
+      {
+        loader: cssSplitMode?MiniCssExtractPlugin.loader:'style-loader',
+      },
+      'css-loader',
+      'postcss-loader'
+    ],
+  },
+];
+if(support_sass){
+  rules.push({
+    test: /\.scss$/i,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: !cssSplitMode?'style-loader':MiniCssExtractPlugin.loader,
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: 2,
+          modules: {
+            localIdentName: '[local]--[hash:base64:5]' ,
+            mode:css_modules||'global'
+          }
+        },
+      },
+      'postcss-loader',
+      {
+        loader: 'sass-loader',
+      }
+    ],
+  })
+}
+////////////// RULES-END ///////////////
+
+
+////////////// OPTIMIZATION ///////////////
+const optimization= {
+  minimize: devMode ? false : true, // 是否压缩js
+  minimizer: [
+    new TerserPlugin({
+      parallel: true,
+      sourceMap:true
+      // terserOptions:{
+      //   compress:false,
+      //   mangle:false
+      // }
+    }),
+    new OptimizeCssAssetsPlugin({}), //压缩css,配合MiniCssExtractPlugin使用
+  ],
+
+};
+if(jsSplitMode){
+  if(jsSplitMode===true||jsSplitMode?.runtime!==false){
+    optimization.runtimeChunk= {
+      name: 'runtime', // 所有入口有自己的runtime.js
+    };
+  }
+  optimization.splitChunks= {
+    cacheGroups: {
+      react: {
+        test: /(react)/,
+        priority: 100,
+        name: 'react-bundle',
+        chunks: 'all',
+        enforce: true,
+      },
+      styles: {
+        priority: 1000,
+        name: 'styles-bundle',
+        test: /\.(le|sc|c)ss$/,
+        chunks: 'all',
+        enforce: true,
+      },
+      modules: {
+        test: /(node_modules)/,
+        priority: 90,
+        name: 'modules-bundle',
+        chunks: 'all',
+        enforce: true,
+      },
+      default: {
+        name: 'default-bundle',
+        minChunks: 3,
+        priority: 10,
+        chunks: 'all',
+        enforce: true,
+      },
+    },
+  };
+}else{
+  optimization.splitChunks={
+    chunks(chunk){
+      return false;
+    }
+  }
+}
+
+////////////// OPTIMIZATION-END ///////////////
+
+
+//////////////// PLUGINS //////////////////
+
+const plugins= [
+  new webpack.DefinePlugin({
+    VERSION_HASH: JSON.stringify(`${Date.now()}-${new Date().toLocaleString()}`),
+    BUILD_ENV: JSON.stringify(process.env.build_env),
+    MOCK: process.env.mock == 1 ? '1' : false, //JSON.stringify(process.env.mock)
+    ...API_HOST,
+    PM_TYPE: JSON.stringify(process.env.pm_type),
+  }),
+  new MiniCssExtractPlugin({ filename: `[name]${hashMode ? '-[chunkhash:8]' : ''}.css` }),
+  new webpack.SourceMapDevToolPlugin({
+    filename: 'sourcemap/[file].map',
+    // publicPath: '..',//resource_path_relative,
+    // fileContext: 'js',
+  })
+];
+
+const indexHtml = CLI_CONFIG?.indexHtml ?? true;
+if(indexHtml){
+  const shareJs = jsSplitMode?['react-bundle', 'modules-bundle', 'default-bundle', 'styles-bundle']:[];
+  if(jsSplitMode===true || jsSplitMode?.runtime !== false){
+    shareJs.splice(0,0,'runtime');
+  }
+  plugins.push(
+    new HtmlWebpackPlugin({
+      chunks: ['index',...shareJs],
+      template: path.join(dirname, 'index.html'),
+      filename: 'index.html',
+      inject: true,
+      isProd: process.env.build_env == 'prod',
+    }),
+  )
+}
+
+const COPY_FOLDER= CLI_CONFIG.copyFolder?['static','pluginjs'].concat(CLI_CONFIG.copyFolder):['static','pluginjs'];
+const folderPatterns = COPY_FOLDER.map(folder=>{
+  return { from: dirname + '/' + folder, to: dirname + '/'+distFolder+'/' + folder ,noErrorOnMissing:true};
+})
+plugins.push(
+  new CopyPlugin({
+      patterns: folderPatterns||[]
+  }),
+)
+
+if (process.env.npm_config_report) {
+  plugins.push(new BundleAnalyzerPlugin());
+}
+if (!devMode) {
+  plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
+}
+if(cssSplitMode){
+  plugins.push(
+    new MiniCssExtractPlugin({ filename: `[name]${hashMode ? '-[chunkhash:8]' : ''}.css` }),
+  )
+}
+
+//////////////// PLUGINS-END //////////////////
+
+///////////// SPA-RENDER ///////////////
+// const PrerenderSPAPlugin = require('prerender-spa-plugin');
+// const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
+// if(process.env.npm_config_snap){
+//   otherPlugins.pish(new PrerenderSPAPlugin({
+//     //代码打包目录和以前配置的目录保持一致
+//     staticDir: path.join(dirname, packageDist), 
+//     outputDir: path.join(dirname, 'prerendered'),
+//     //routes：要预渲染的页面访问路由
+//     routes: ['/','/about' ],
+//     renderer: new Renderer({
+//       // renderAfterDocumentEvent: 'render-event',//等待页面发送render-event消息后开始渲染
+//       renderAfterTime:2000,//页面加载后2000毫秒后开始渲染
+//       injectProperty: '__PRERENDER_INJECTED',
+//         inject: {
+//           foo: 'bar'
+//         },
+//         // headless：渲染时显示浏览器窗口。对调试很有用。
+//         headless: true
+//     }),
+//   }))
+// }
+///////////// SPA-RENDER-END ///////////////
 
 module.exports = {
   mode: devMode ? 'development' : 'production',
   devServer: {
     disableHostCheck: true,
-    contentBase: "dist",
+    contentBase: distFolder,
     host: '0.0.0.0',
     open: true,
     overlay:true,
@@ -100,17 +422,12 @@ module.exports = {
     // hot: true,
   },
   // 如果哪天不需要兼容ie11了，把这里@babel/polyfill去掉就行了
-  entry: {
-    index: [
-      // '@babel/polyfill',
-      path.resolve(dirname, 'src/index'),
-    ],
-  },
+  entry: entry,
   output: {
     // devtoolModuleFilenameTemplate:'webpack:///dist/[resource-path]',
     filename: `[name]${hashMode ? '-[chunkhash]' : ''}.js`,
     // chunkFilename: 'js/[name]-[hash].chunk.js', // ./js/[name]-[hash].chunk.js
-    path: path.join(dirname, 'dist/'),
+    path: path.join(dirname, distFolder,distJsFolder),
     publicPath: resource_path_relative,
   },
   resolve: {
@@ -126,234 +443,8 @@ module.exports = {
     },
   },
   module: {
-    rules: [
-      {
-        test: /\.js[x]?$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                '@babel/preset-react',
-                [
-                  '@babel/preset-env',
-                  {
-                    targets: devMode
-                      ? { chrome: '90' }
-                      : {
-                          chrome: '40',
-                          ie: '11',
-                        },
-                  },
-                ],
-              ],
-              plugins: [
-                ['@babel/plugin-transform-runtime', { corejs: 3 }],
-                '@babel/plugin-proposal-optional-chaining',
-                '@babel/plugin-proposal-nullish-coalescing-operator',
-                ['@babel/plugin-proposal-decorators', { legacy: true }],
-                ['@babel/plugin-proposal-private-methods', { loose: true }],
-                ['@babel/plugin-proposal-class-properties', { loose: true }],
-                // ["import", {
-                //   style: false,//"css",
-                //   libraryName: "kn-hooks" ,
-                //   libraryDirectory:"src",
-                //   camel2DashComponentName:false,
-                // }],
-                // ["import", {
-                //   style: true,//"css",
-                //   libraryDirectory:"",
-                //   libraryName: "antd" ,
-                // }]
-              ],
-            },
-          },
-        ],
-      },
-      // {
-      //   test: /\.json$/,
-      //   use: 'json-loader'
-      // },
-      {
-        test: /\.js[x]?$/,
-        include: /kn-hooks/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                '@babel/preset-react',
-                [
-                  '@babel/preset-env',
-                  {
-                    targets: devMode
-                      ? { chrome: '80' }
-                      : {
-                          chrome: '40',
-                          ie: '11',
-                        },
-                  },
-                ],
-              ],
-              plugins: [
-                ['@babel/plugin-transform-runtime', { corejs: 3 }],
-                '@babel/plugin-proposal-optional-chaining',
-                '@babel/plugin-proposal-nullish-coalescing-operator',
-                ['@babel/plugin-proposal-decorators', { legacy: true }],
-                ['@babel/plugin-proposal-private-methods', { loose: true }],
-                ['@babel/plugin-proposal-class-properties', { loose: true }],
-              ],
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(jpg|png|gif|svg)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 1024 * 5,
-          name: `assets/[name].[hash:8].[ext]`,
-        },
-      },
-      {
-        test: /\.(ttf|eot|woff|woff2)$/,
-        loader: 'file-loader',
-        options: {
-          name: `assets/font/[name].[hash:8].[ext]`,
-        },
-      },
-      {
-        test: /\.less$/i,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 2,
-              modules: { localIdentName: '[local]--[hash:base64:5]' },
-            },
-          },
-          'postcss-loader',
-          {
-            loader: 'less-loader',
-            options:{
-              javascriptEnabled: CLI_CONFIG?.less?.javascriptEnabled??false
-            }
-          }
-        ],
-      },
-      // {
-      //   test: /\.scss$/i,
-      //   exclude: /node_modules/,
-      //   use: [
-      //     {
-      //       loader: MiniCssExtractPlugin.loader,
-      //       options: {
-      //         publicPath: '../',
-      //       },
-      //     },
-      //     {
-      //       loader: 'css-loader',
-      //       options: { importLoaders: 2, sourceMap:false, modules: { localIdentName: '[local]--[hash:base64:5]' } },
-      //     },
-      //     ...cssLoader,
-      //     'sass-loader',
-      //   ],
-      // },
-      {
-        test: /\.css$/i,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          'css-loader',
-          'postcss-loader'
-        ],
-      },
-    ],
-  },
-  optimization: {
-    minimize: devMode ? false : true, // 是否压缩js
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        sourceMap:true
-        // terserOptions:{
-        //   compress:false,
-        //   mangle:false
-        // }
-      }),
-      new OptimizeCssAssetsPlugin({}), //压缩css,配合MiniCssExtractPlugin使用
-    ],
-    runtimeChunk: {
-      name: 'runtime', // 所有入口有自己的runtime.js
-    },
-    splitChunks: {
-      cacheGroups: {
-        react: {
-          test: /(react)/,
-          priority: 20,
-          name: 'react-bundle',
-          chunks: 'all',
-          enforce: true,
-        },
-        styles: {
-          priority: 1000,
-          name: 'styles-bundle',
-          test: /\.(le|sc|c)ss$/,
-          chunks: 'all',
-          enforce: true,
-        },
-        modules: {
-          test: /(node_modules)/,
-          priority: 2,
-          name: 'modules-bundle',
-          chunks: 'all',
-          enforce: true,
-        },
-        default: {
-          name: 'default-bundle',
-          minChunks: 2,
-          priority: 50,
-          chunks: 'all',
-          enforce: true,
-        },
-      },
-    },
+    rules: rules
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      VERSION_HASH: JSON.stringify(`${Date.now()}-${new Date().toLocaleString()}`),
-      BUILD_ENV: JSON.stringify(process.env.build_env),
-      MOCK: process.env.mock == 1 ? '1' : false, //JSON.stringify(process.env.mock)
-      ...API_HOST,
-      PM_TYPE: JSON.stringify(process.env.pm_type),
-    }),
-    // new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({ filename: `[name]${hashMode ? '-[chunkhash:8]' : ''}.css` }),
-    new HtmlWebpackPlugin({
-      chunks: ['index', 'runtime', 'react-bundle', 'modules-bundle', 'default-bundle', 'styles-bundle'],
-      template: path.join(dirname, 'index.html'),
-      filename: 'index.html',
-      inject: true,
-      isProd: process.env.build_env == 'prod',
-    }),
-
-    ...otherPlugins,
-    new CopyPlugin({
-      patterns: [
-        { from: dirname + '/static', to: dirname + '/dist/static' ,noErrorOnMissing:true},
-        { from: dirname + '/pluginjs', to: dirname + '/dist/pluginjs',noErrorOnMissing:true }
-    ],
-    }),
-    new webpack.SourceMapDevToolPlugin({
-      filename: 'sourcemap/[file].map',
-      // publicPath: '..',//resource_path_relative,
-      // fileContext: 'js',
-    })
-  ],
+  optimization: optimization,
+  plugins: plugins,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kn-cli",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "main": "index.js",
   "scripts": {