@ecoding/base.build 0.0.9 → 0.0.10

package/libs/entries/index.js

@@ -6,7 +6,7 @@ const getEntries = () => {
         return entry.pagesObj;
     }
     return {
-        app: rootPath("./src/app.tsx")
+        app: rootPath("./src/index.tsx")
     };
 };
 

package/libs/entries/ssr.js

@@ -0,0 +1,13 @@
+const { rootPath, ssrEntry } = require("../z-helpers/paths");
+const { customConfig } = require("../z-helpers/config");
+
+const getEntries = () => {
+    if (customConfig.mpa) {
+        return ssrEntry.pagesObj;
+    }
+    return {
+        app: rootPath("./src/app.tsx")
+    };
+};
+
+module.exports = getEntries;

package/libs/externals/ssr.js

@@ -0,0 +1,13 @@
+const { packageJSON } = require("../z-helpers/paths");
+const nodeExternals = require("webpack-node-externals");
+
+const getExternals = () => {
+    return {
+        // "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
+        // "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
+        ...nodeExternals(),
+        ...Object.keys(packageJSON.dependencies)
+    };
+};
+
+module.exports = getExternals;

package/libs/module/ssr.js

@@ -0,0 +1,27 @@
+const getTsRule = require("./ts-loader");
+const getImgRule = require("./img-loader");
+const getSvgRule = require("./svg-loader");
+const getFontRule = require("./font-loader");
+
+const getModule = () => {
+    const tsRule = getTsRule();
+    const imgRule = getImgRule();
+    const svgRule = getSvgRule();
+    const fontRule = getFontRule();
+
+    return {
+        // noParse:/test.js$/, 不编译正则匹配上的文件
+        rules: [
+            tsRule,
+            {
+                test: /\.(styl|css|less)$/, //node端不能 require('xx.css')，会报错
+                loader: "null"
+            },
+            imgRule,
+            svgRule,
+            fontRule
+        ]
+    };
+};
+
+module.exports = getModule;

package/libs/module/ts-loader/index.js

@@ -3,7 +3,7 @@ const babelLoader = require("./babel");
 
 const getTsRule = () => {
     return {
-        test: /\.tsx?$/,
+        test: /\.(tsx?|jsx?)$/,
         use: [babelLoader],
         // 指定要编译的路径
         include: [rootPath("src"), /\/node_modules\/@ecoding.*/],

package/libs/optimization/index.js

@@ -1,8 +1,9 @@
-const getMPAOptimization = require('./mpa');
-const getSPAOptimization = require('./spa');
-
+const getMPAOptimization = require("./mpa");
+const getSPAOptimization = require("./spa");
+const getSSROptimization = require("./ssr");
 
 module.exports = {
     getMPAOptimization,
-    getSPAOptimization
-};
+    getSPAOptimization,
+    getSSROptimization
+};

package/libs/optimization/mpa.js

@@ -13,56 +13,63 @@ const { customConfig } = require("../z-helpers/config");
  *      size：文件大小
  */
 const getOptimization = () => {
-    return {
+    const obj = {
         chunkIds: isEnvDevelopment ? "named" : "deterministic",
         moduleIds: isEnvDevelopment ? "named" : "deterministic",
-        runtimeChunk: {
-            // 单独分割运行时代码 webpack 运行时所需代码
-            name: (entrypoint) => `wp-runtime-${entrypoint.name}`
-        },
         minimize: isEnvDevelopment ? false : true,
         minimizer: [
             new TerserPlugin({ parallel: true }), // parallel：多进程压缩
             new CssMinimizerPlugin()
-        ],
-        // 这里的体积大小时指压缩前的
-        // 如果不想代码分割，设置 splitChunks： false，通常用于微前端或微模块
-        splitChunks: customConfig.dll
-            ? false
-            : {
-                  chunks: "all", // initial | all | async all 表明了在异步和同步之间共享
-                  minSize: 10000, // 生成 chunk 的最小体积（以 bytes 为单位） 不限制
-                  maxSize: 500000, // 封装的模块的最小体积 0 不限制
-                  minRemainingSize: 10000, // 分割后剩下的模块大小 0 不限制
-                  minChunks: 1, // 模块的最小被引用次数
-                  maxAsyncRequests: 30, // 异步模块按需加载的最大并行请求数 import('xxx.js').then
-                  maxInitialRequests: 30, // 同步模块最大并行请求数
-                  // enforceSizeThreshold: 1000000000, // 如果代码块体积超过了 50000，则强制打包，无视其他配置
-                  cacheGroups: {
-                      // 缓存组
-                      vendors: {
-                          name: "vendors",
-                          test: /[\\/]node_modules[\\/]/,
-                          // test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|redux|react-redux|redux-thunk|connected-react-router|hoist-non-react-statics)/,
-                          // minSize: 0,
-                          enforce: true, // ignore splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests
-                          priority: -10
-                      },
-                      // vendors2: {
-                      //     name: 'vendors2',
-                      //     test: /[\\/]node_modules[\\/](axios)/,
-                      //     // minSize: 0,
-                      //     priority: -10,
-                      // },
-                      default: {
-                          test: /[\\/]src[\\/]/,
-                          minChunks: 2, // 如果一个模块被引用2次的话，会单独提取
-                          priority: -20, // 优先级
-                          reuseExistingChunk: true // 是否使用其他已被分割出去的代码块
-                      }
-                  }
-              }
+        ]
     };
+
+    if (customConfig.dll) {
+        obj.splitChunks = false;
+    } else {
+        // 这里的体积大小时指压缩前的
+        obj.splitChunks = {
+            chunks: "all", // initial | all | async all 表明了在异步和同步之间共享
+            minSize: 10000, // 生成 chunk 的最小体积（以 bytes 为单位） 不限制
+            maxSize: 500000, // 封装的模块的最小体积 0 不限制
+            minRemainingSize: 10000, // 分割后剩下的模块大小 0 不限制
+            minChunks: 1, // 模块的最小被引用次数
+            maxAsyncRequests: 30, // 异步模块按需加载的最大并行请求数 import('xxx.js').then
+            maxInitialRequests: 30, // 同步模块最大并行请求数
+            // enforceSizeThreshold: 1000000000, // 如果代码块体积超过了 50000，则强制打包，无视其他配置
+            cacheGroups: {
+                // 缓存组
+                vendors: {
+                    name: "vendors",
+                    test: /[\\/]node_modules[\\/]/,
+                    // test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|redux|react-redux|redux-thunk|connected-react-router|hoist-non-react-statics)/,
+                    // minSize: 0,
+                    enforce: true, // ignore splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests
+                    priority: -10
+                },
+                // vendors2: {
+                //     name: 'vendors2',
+                //     test: /[\\/]node_modules[\\/](axios)/,
+                //     // minSize: 0,
+                //     priority: -10,
+                // },
+                default: {
+                    test: /[\\/]src[\\/]/,
+                    minChunks: 2, // 如果一个模块被引用2次的话，会单独提取
+                    priority: -20, // 优先级
+                    reuseExistingChunk: true // 是否使用其他已被分割出去的代码块
+                }
+            }
+        };
+    }
+
+    if (customConfig.micro !== "child") {
+        obj.runtimeChunk = {
+            // 单独分割运行时代码 webpack 运行时所需代码
+            name: (entrypoint) => `wp-runtime-${entrypoint.name}`
+        };
+    }
+
+    return obj;
 };
 
 module.exports = getOptimization;

package/libs/optimization/ssr.js

@@ -0,0 +1,28 @@
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const { isEnvDevelopment } = require("../z-helpers/util");
+
+/** optimization 配置
+ * module: 每一个文件其实都可以看成一个module
+ * chunk：webpack打包最终生成的代码块，代码块会生成文件，一个文件对应一个chunk
+ * chunkIds、moduleIds：natural | named | deterministic（生产环境默认） | size，chunk 命名算法
+ *      natural：自然数 1，2，3
+ *      named：文件名
+ *      deterministic：简短hash
+ *      size：文件大小
+ */
+const getOptimization = () => {
+    const obj = {
+        chunkIds: isEnvDevelopment ? "named" : "deterministic",
+        moduleIds: isEnvDevelopment ? "named" : "deterministic",
+        minimize: isEnvDevelopment ? false : true,
+        minimizer: [
+            new TerserPlugin({ parallel: true }), // parallel：多进程压缩
+            new CssMinimizerPlugin()
+        ]
+    };
+    obj.splitChunks = false;
+    return obj;
+};
+
+module.exports = getOptimization;

package/libs/output/ssr.js

@@ -0,0 +1,34 @@
+const { rootPath } = require("../z-helpers/paths");
+const { customConfig } = require("../z-helpers/config");
+
+const pubPath = () => {
+    const dev = customConfig.dev || {};
+    switch (process.env.NODE_ENV) {
+        case "production":
+            return customConfig.publicPath || "";
+        default:
+            return dev.publicPath || "/";
+    }
+};
+
+const getOutput = () => {
+    return Object.assign({
+        // 输出文件目录（将来所有资源输出的公共目录）
+        path: rootPath(customConfig.outputPath || "./dist"),
+
+        /**
+             * 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
+             * 注意：可在业务代码中 动态修改 output 内的publicPath
+             * if(...) {
+                    __webpack_public_path__ = 'https://cdn.com'
+                }
+            */
+        publicPath: pubPath(),
+
+        // 入口代码块文件名称（指定名称+目录）
+        filename: "[name].server-entry.js",
+        libraryTarget: "commonjs2"
+    });
+};
+
+module.exports = getOutput;

package/libs/plugins/index.js

@@ -45,7 +45,7 @@ const getHtmlWebpack = () => {
                 // favicon: rootPath('./src/assets/img/favicon.ico')
             };
             if (isEnvProduction) {
-                obj.output = rootPath("./dist");
+                // obj.output = rootPath("./dist");
                 obj.minify = {
                     minimize: true,
                     removeConments: true,
@@ -65,7 +65,7 @@ const getHtmlWebpack = () => {
             inject: "body"
         };
         if (isEnvProduction) {
-            obj.output = rootPath("./dist");
+            // obj.output = rootPath("./dist");
             obj.minify = {
                 minimize: true,
                 removeConments: true,

package/libs/plugins/ssr.js

@@ -0,0 +1,18 @@
+const WebpackBar = require("webpackbar");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取分离css
+const { isEnvProduction } = require("../z-helpers/util");
+
+module.exports = () => {
+    const plugins = [
+        new WebpackBar({
+            profile: true
+        }),
+
+        isEnvProduction &&
+            new MiniCssExtractPlugin({
+                // filename: 'css/[name].css',
+                filename: "[id].[chunkhash:5].css"
+            })
+    ].filter(Boolean);
+    return plugins;
+};

package/libs/webpack.ssr.js

@@ -0,0 +1,76 @@
+const { Production, Development } = require("./z-helpers/const");
+const { isEnvDevelopment } = require("./z-helpers/util");
+const { customConfig } = require("./z-helpers/config");
+const getEntries = require("./entries/ssr");
+const getOutput = require("./output/ssr");
+const { getSSROptimization } = require("./optimization");
+const getModule = require("./module/ssr");
+const { getResolve, getResolveLoader } = require("./resolve");
+const getPlugins = require("./plugins/ssr");
+const getExternals = require("./externals/ssr");
+
+/**
+ * 
+ * @param {*} cmdOpts : build时 { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true } ｜ 本地开发dev时 { WEBPACK_SERVE: true }
+ * @param {*} runtimeOpts : 
+ *  {
+        mode: 'development',
+        config: [ './deploy/webpack.config.js' ],
+        env: { WEBPACK_SERVE: true }
+    }
+ * @returns 
+ */
+const getWebpackConfig = (env) => {
+    // 打包环境
+    const mode = isEnvDevelopment ? Development : Production;
+
+    // 配置缓存chunk
+    /**
+     * 'filesystem', // filesystem(prod默认) | memory(dev默认)
+     */
+    const cache = {
+        type: isEnvDevelopment ? "memory" : "filesystem"
+    };
+
+    // 配置入口 entry
+    const entry = getEntries();
+
+    // 配置输出bundle output
+    const output = getOutput();
+
+    // 配置resolveLoader
+    const resolveLoader = getResolveLoader();
+
+    // 配置optimization
+    const optimization = getSSROptimization();
+
+    // 配置loaders
+    const module = getModule();
+
+    // 配置resolve
+    const resolve = getResolve();
+
+    // 配置plugins
+    const plugins = getPlugins();
+
+    // 配置externals
+    const externals = getExternals();
+
+    const config = {
+        target: "node",
+        mode,
+        cache,
+        entry,
+        output,
+        resolveLoader,
+        optimization,
+        module,
+        resolve,
+        plugins,
+        externalsPresets: { node: true }, // 不打包 node 模块，什么 fs path 那些
+        externals
+    };
+    return config;
+};
+
+module.exports = getWebpackConfig;

package/libs/z-helpers/paths.js

@@ -5,15 +5,16 @@ const cwd = process.cwd();
 const rootPath = (pathname) => {
     return resolve(cwd, pathname);
 };
+const packageJSON = require(rootPath("./package.json"));
 
 const resolvePath = resolve;
 
-const getEntries = () => {
+const getEntries = (filename) => {
     const dirPath = rootPath("./src/pages");
     const pages = fs.readdirSync(dirPath);
     const pagesObj = {};
     pages.forEach((pageName) => {
-        pagesObj[pageName] = rootPath(`./src/pages/${pageName}/index.tsx`);
+        pagesObj[pageName] = rootPath(`./src/pages/${pageName}/${filename}`);
     });
     return {
         pagesObj,
@@ -24,5 +25,7 @@ const getEntries = () => {
 module.exports = {
     rootPath,
     resolvePath,
-    entry: getEntries()
+    packageJSON,
+    entry: getEntries("index.tsx"),
+    ssrEntry: getEntries("index.server.tsx")
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/base.build",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "description": "tpl building",
     "author": "cxc",
     "license": "MIT",
@@ -42,15 +42,16 @@
         "postcss-loader": "7.0.0",
         "style-loader": "3.3.1",
         "terser-webpack-plugin": "5.3.3",
-        "typescript": "4.7.4",
+        "typescript": "4.8.3",
         "webpack": "5.73.0",
         "webpack-cli": "4.10.0",
         "webpack-dev-server": "4.9.2",
         "webpack-merge": "5.8.0",
+        "webpack-node-externals": "^3.0.0",
         "webpackbar": "5.0.2"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "dba212f7c4b60a4ff6136340c0df65d90244a2f7"
+    "gitHead": "c360835b00f1834e9958a5a0fb7d0d4185cad6f7"
 }