@ecoding/base.build 0.0.1

package/README.md

@@ -0,0 +1,87 @@
+// 工程通用打包配置
+
+# `@ecoding/build`
+
+## 简单快速配置 abc.js
+
+```javascript
+{
+    mpa: boolean, // 是否是多页
+    dll：boolean, // 是否打dll
+    micro："main" | "child", // 微前端主应用或子应用 默认null
+    outputLibrary: string, // micro == child时生效
+    publicPath: string,
+    outputPath: string, // build bundle 目录，相对命令执行目录
+    externals: object;
+    /* externals
+    {
+        "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
+        "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
+    };
+    */
+    dev:{
+        publicPath: string; // devserver 读这个
+        port: number, // devserver 端口 默认 8080
+    }
+}
+```
+
+## 复杂自定义打包配置
+
+在工程下新建 build.js，return webpack 的配置即可，注意完全按照 webpack 配置规则，框架无做任何干涉
+
+```javascript
+module.exports = {
+    externals: {
+        react: "var window.React",
+        moment: "var window.moment",
+        lodash: "var window._",
+        "react-dom": "var window.ReactDOM",
+        "prop-types": "var window.PropTypes"
+    }
+};
+```
+
+## Usage
+
+```json
+{
+    "@babel/core": "7.18.5", // babel
+    "@babel/plugin-proposal-class-properties": "7.17.12", //  会将类中的属性编译，支持私有属性
+    "@babel/plugin-proposal-decorators": "7.18.2", // 插件会支持类的装饰器语法, 包括类装饰器, 属性装饰器, 方法装饰器， tsconfig.json -> "experimentalDecorators": true,
+    "@babel/plugin-proposal-private-methods": "7.17.12", //  会将类中的方法编译，支持私有方法
+    "@babel/plugin-proposal-private-property-in-object": "7.17.12",
+    "@babel/plugin-transform-runtime": "7.18.5", // babel 运行时工具集合
+    "@babel/preset-env": "7.18.2", // babel插件集合
+    "@babel/preset-react": "7.17.12", // babel 支持 react 插件
+    "@babel/preset-typescript": "7.17.12", // babel 支持 typescript 插件
+    "@ecoding/mock": "0.0.10", // 自己写的mock插件
+    "@svgr/webpack": "6.2.1", // webpack svg 插件
+    "@typescript-eslint/eslint-plugin": "5.28.0", // eslint ts 插件
+    "@typescript-eslint/parser": "5.28.0", // eslint ts 编译器
+    "add-asset-html-webpack-plugin": "5.0.2", // 将某个文件打包输出到build目录下，并在html中自动引入该资源
+    "autoprefixer": "10.4.7", // 可以自动在样式中添加浏览器厂商前，是postcss插件
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "3.23.1",
+    "cross-env": "7.0.3",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
+    "eslint": "8.18.0",
+    "globby": "^11.0.2",
+    "html-webpack-plugin": "5.5.0", // html 模版插件
+    "inline-chunk-html-plugin": "1.1.1", // 内联 webpack runtime 代码
+    "less": "4.1.3",
+    "less-loader": "11.0.0",
+    "mini-css-extract-plugin": "2.6.1", // css压缩
+    "postcss-loader": "7.0.0", // css向下兼容
+    "style-loader": "3.3.1", // 编译 style 内联css
+    "terser-webpack-plugin": "5.3.3", // js压缩
+    "webpack": "5.73.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.2",
+    "webpack-merge": "5.8.0",
+    "webpackbar": "5.0.2"
+}
+```

package/libs/dev/index.js

@@ -0,0 +1,64 @@
+const mock = require("@ecoding/mock").default;
+const { rootPath, entry } = require("../z-helpers/paths");
+const { customConfig } = require("../z-helpers/config");
+
+const entryRewrites = () => {
+    const ary = [];
+    entry.pages.forEach((pageName) => {
+        const reg = new RegExp(`${pageName}\\.*`, "i");
+        ary.push({ from: reg, to: `/${pageName}.html` });
+    });
+    return ary;
+};
+
+const getDevServer = () => {
+    const dev = Object.assign({}, customConfig.dev);
+    delete dev.publicPath;
+    const obj = {
+        // 配合单页路由 BrowserRouter 使用找寻index
+        historyApiFallback: {
+            rewrites: customConfig.mpa ? entryRewrites() : [{ from: /\.*/, to: "/index.html" }]
+        },
+        headers: {
+            "Access-Control-Allow-Origin": "*"
+        },
+        static: {
+            directory: rootPath("dist/")
+        },
+        /**
+         * 配置监听端口, 因为8080很常用, 为了避免和其他程序冲突, 我们配个其他的端口号 mac 80端口需要sudo
+         */
+        port: 8080,
+        host: "0.0.0.0",
+        // "proxy": {
+        //     "/api/cxc": {
+        //         target: "https://nei.netease.com/api/apimock-v2/218e6a7e23485596c6be37252eba11c9/comment/deleteComment?commentId=",
+        //         changeOrigin: true,
+        //         secure: false
+        //     }
+        // },
+        onBeforeSetupMiddleware: function (devServer) {
+            if (!devServer) {
+                throw new Error("webpack-dev-server is not defined");
+            }
+            mock(devServer.app, {
+                enable: true,
+                type: "local"
+            });
+        },
+        /**
+         * config.devServer.proxy用来配置后端api的反向代理, ajax /api/auth/*的请求会被转发到 http://api.example.dev/auth/*, /api/pay/*的请求会被转发到 http://api.example.dev/pay/*.
+         * changeOrigin会修改HTTP请求头中的Host为target的域名, 这里会被改为api.example.dev
+         * pathRewrite用来改写URL, 这里我们把/api前缀去掉. pathRewrite: { '^/api': '' }
+         */
+        // proxy: proxy,
+        ...dev
+    };
+    if (customConfig.micro === "child") {
+        obj.hot = false;
+        obj.liveReload = false;
+    }
+    return obj;
+};
+
+module.exports = getDevServer;

package/libs/entries/index.js

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

package/libs/externals/index.js

@@ -0,0 +1,11 @@
+const { customConfig } = require("../z-helpers/config");
+
+const getExternals = () => {
+    return {
+        // "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
+        // "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
+        ...customConfig.externals
+    };
+};
+
+module.exports = getExternals;

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

@@ -0,0 +1,55 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { isEnvDevelopment, isEnvProduction } = require("../../z-helpers/util");
+
+const loaders = [
+    isEnvDevelopment && { loader: "style-loader" },
+    isEnvProduction && MiniCssExtractPlugin.loader,
+    {
+        loader: "css-loader",
+        options: {
+            modules: undefined // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
+        }
+    },
+    {
+        loader: "postcss-loader",
+        options: {
+            postcssOptions: {
+                plugins: {
+                    autoprefixer: {
+                        overrideBrowserslist: ["IE 10", "iOS >=6", "Android >=4"],
+                        remove: false
+                    }
+                }
+            }
+        }
+    }
+].filter(Boolean);
+
+const getLessRule = () => {
+    return {
+        test: /\.less$/,
+        use: [
+            ...loaders,
+            {
+                loader: "less-loader",
+                options: {
+                    lessOptions: {
+                        javascriptEnabled: true
+                    }
+                }
+            }
+        ]
+    };
+};
+
+const getCssRule = () => {
+    return {
+        test: /\.css$/,
+        use: [...loaders]
+    };
+};
+
+module.exports = {
+    getCssRule,
+    getLessRule
+};

package/libs/module/css-loader/postcss.config.js

@@ -0,0 +1,14 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+    "plugins": {
+        "autoprefixer": {
+            overrideBrowserslist:[
+                "IE 10",
+                "iOS >=6", 
+                "Android >=4"
+            ],
+            remove: false
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+
+const getFontRule = () => {
+    return {
+        test: /\.(eot|ttf|woff2?)(\?.+)?$/,
+        type: 'asset',
+        parser: {
+            dataUrlCondition: {
+                maxSize: 10 * 1024,
+            }
+        },
+        generator: {
+            filename: 'fonts/[base]',
+        }
+    }
+}
+
+
+module.exports = getFontRule;

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

@@ -0,0 +1,19 @@
+
+const getImgRule = () => {
+    return {
+        test: /\.(png|jpg|jpeg|gif)(\?.+)?$/,
+        exclude: /favicon\.png$/,
+        type: 'asset',
+        parser: {
+            dataUrlCondition: {
+                maxSize: 10 * 1024,
+            }
+        },
+        generator: {
+            filename: 'img/[base]',
+        }
+    }
+}
+
+
+module.exports = getImgRule;

package/libs/module/index.js

@@ -0,0 +1,29 @@
+const getTsRule = require('./ts-loader');
+const { getCssRule, getLessRule } = require('./css-loader');
+const getImgRule = require('./img-loader');
+const getSvgRule = require('./svg-loader');
+const getFontRule = require('./font-loader');
+
+const getModule = () => {
+    const tsRule = getTsRule();
+    const lessRule = getLessRule();
+    const cssRule = getCssRule();
+    const imgRule = getImgRule();
+    const svgRule = getSvgRule();
+    const fontRule = getFontRule();
+
+    return {
+        // noParse:/test.js$/, 不编译正则匹配上的文件
+        rules: [
+            tsRule,
+            lessRule,
+            cssRule,
+            imgRule,
+            svgRule,
+            fontRule
+        ]
+    }
+}
+
+
+module.exports = getModule;

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

@@ -0,0 +1,10 @@
+
+const getSvgRule = () => {
+    return {
+        test: /\.svg$/,
+        use: ['@svgr/webpack']
+    }
+}
+
+
+module.exports = getSvgRule;

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

@@ -0,0 +1,75 @@
+const presets = [
+    [
+        "@babel/preset-env",
+        {
+            ignoreBrowserslistConfig: true,
+
+            /**
+             * false 当我们使用preset-env传入useBuiltIns参数时候，默认为false。
+             * 它表示仅仅会转化最新的ES语法，并不会转化任何Api和方法。就是关闭垫片
+             * 
+             * 当传入entry时，需要我们在项目入口文件中手动引入一次core-js，
+             * 它会根据我们配置的浏览器兼容性列表(browserList)然后全量引入不兼容的polyfill。
+             * 项目入口文件中需要额外引入polyfill
+                // core-js 2.0中是使用"@babel/polyfill" core-js3.0版本中变化成为了上边两个包
+                import "@babel/polyfill" // core-js 2.0
+
+                import "core-js/stable" // core-js3.0
+                import "regenerator-runtime/runtime" // core-js3.0
+
+                // babel
+                {
+                    "presets": [
+                        ["@babel/preset-env", {
+                            "useBuiltIns": "entry"
+                        }]
+                    ]
+                }
+
+             *  usage时，会根据配置的浏览器兼容，以及代码中 使用到的Api 进行引入polyfill按需添加。  
+             */
+            useBuiltIns: "usage",
+            targets: {
+                browsers: [
+                    "last 1 version",
+                    "> 1%",
+                    "IE 10",
+                    "iOS >=6",
+                    "Android >=4"
+                ]
+            },
+            // 如果设为true，则会编译 es6Module 语法，则会失去tree-shaking
+            modules: false,
+            corejs: 3,
+            // 需要忽略的预编译包
+            exclude: [
+                // 没使用Symbol,不需要_typeof方法兼容Symbol
+                'transform-typeof-symbol'
+            ]
+        }
+    ],
+    ["@babel/preset-react", {
+        // automatic 自动模式 不需要引入 import React form 'react';
+        // classic 经典模式 需要引入 import React form 'react';
+        runtime: 'classic',
+    }],
+    ["@babel/preset-typescript"]
+].filter(Boolean);
+
+const plugins = [
+    ["@babel/plugin-transform-runtime", { corejs: false }],
+    ["@babel/plugin-proposal-decorators", { legacy: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }]
+].filter(Boolean);
+
+const babelLoader = {
+    loader: 'babel-loader',
+    options: {
+        presets,
+        plugins,
+        cacheDirectory: true
+    }
+}
+module.exports = babelLoader;

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

@@ -0,0 +1,16 @@
+const { rootPath } = require("../../z-helpers/paths");
+const babelLoader = require("./babel");
+
+const getTsRule = () => {
+    return {
+        test: /\.tsx?$/,
+        use: [babelLoader],
+        // 指定要编译的路径
+        include: [rootPath("src"), /\/node_modules\/@ecoding.*/],
+
+        // 忽略要编译的路径
+        exclude: [/node_modules/]
+    };
+};
+
+module.exports = getTsRule;

package/libs/optimization/index.js

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

package/libs/optimization/mpa.js

@@ -0,0 +1,68 @@
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const { isEnvDevelopment } = require("../z-helpers/util");
+const { customConfig } = require("../z-helpers/config");
+
+/** optimization 配置
+ * module: 每一个文件其实都可以看成一个module
+ * chunk：webpack打包最终生成的代码块，代码块会生成文件，一个文件对应一个chunk
+ * chunkIds、moduleIds：natural | named | deterministic（生产环境默认） | size，chunk 命名算法
+ *      natural：自然数 1，2，3
+ *      named：文件名
+ *      deterministic：简短hash
+ *      size：文件大小
+ */
+const getOptimization = () => {
+    return {
+        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 // 是否使用其他已被分割出去的代码块
+                      }
+                  }
+              }
+    };
+};
+
+module.exports = getOptimization;

package/libs/optimization/spa.js

@@ -0,0 +1,75 @@
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const { isEnvDevelopment } = require("../z-helpers/util");
+const { customConfig } = require("../z-helpers/config");
+
+/** 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()
+        ]
+    };
+
+    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/output/index.js

@@ -0,0 +1,54 @@
+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].[chunkhash:8].min.js",
+
+            /**
+             * 非入口代码文件命名
+             * 1. 每一个入口会生成一个chunk
+             * 2. 代码分割动态import 引入代码会生成一个chunk
+             */
+            chunkFilename: "[name].[chunkhash:8].min.js"
+            // library: '[name]', // 整个库向外暴露的变量名
+            // libraryTarget: 'var' // 默认
+        },
+        customConfig.micro === "child"
+            ? {
+                  library: {
+                      name: customConfig.outputLibrary,
+                      type: "umd"
+                  },
+                  chunkLoadingGlobal: `webpackJsonp_${customConfig.outputLibrary}`,
+                  globalObject: "window"
+              }
+            : {}
+    );
+};
+
+module.exports = getOutput;

package/libs/output/readme.md

@@ -0,0 +1,142 @@
+# output
+
+## path
+> 输出文件目录（将来所有资源输出的公共目录）
+
+## publicPath
+> 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
+```javascript
+// 可在业务代码中 动态修改 output 内的publicPath
+if(...) {
+    __webpack_public_path__ = 'https://cdn.conm/'
+}
+```
+
+## filename
+> 入口代码块文件名称（指定名称+目录）
+
+## chunkFilename
+> 代码块文件名称
+* 1. 每一个入口会生成一个chunk
+* 2. 代码分割动态import 引入代码会生成一个chunk
+
+## library
+> 整个库向外暴露的变量名，library: '[name]'
+
+## libraryTarget
+> 导出库的规范方式
+
+## umdNamedDefine
+> 如果在output.libraryTarget被设置成umd形式，并且output.library也被设置时，将该选项设为true将会给命名给amd模块
+
+
+
+#### var - 默认值
+> 当库被加载时，那么库的返回值会被分配到使用用 var 声明的变量上。
+```javascript
+var myDemo = _entry_return_;
+myDemo();
+```
+
+#### assign
+> 会把库返回值分配给一个没使用var声明的变量中，如果这个变量没有在引入作用域中提前声明过，那么将会挂载在全局作用域中。（注意，这个行为有可能会覆盖全局作用域中的已有变量）
+```javascript
+myDemo = _entry_return_;
+```
+
+#### this
+> 将库的返回值分配给this对象的由 output.library指定的属性。其中this的意义由用户决定。
+```javascript
+this["myDemo"] = _entry_return_;
+this.myDemo();
+myDemo(); // if this is window
+```
+
+#### window
+> 将库的返回值分配给 browser window 对象的由output.library指定的属性。
+```javascript
+window["myDemo"] = _entry_return_;
+window.myDemo.doSomething();
+```
+
+#### global
+> 将库的返回值分配给 node global 对象的由output.library指定的属性。
+```javascript
+global["myDemo"] = _entry_return_;
+global.myDemo();
+```
+
+#### commonjs
+> 将库的返回值分配给exports对象的由output.library指定的属性。正如名字所指，这个选项可以使用在 CommonJS 环境。
+```javascript
+exports["myDemo"] = _entry_return_;
+require("myDemo").doSomething();
+```
+
+#### commonjs2
+> 将库的返回值分配给module.exports。正如名字所指，这个选项可以使用在 CommonJS 环境。
+```javascript
+module.exports = _entry_return_;
+const myDemo = require("myDemo");
+myDemo();
+```
+
+#### amd
+> 这个选项会把库作为 AMD 模块导出。AMD模块要求输入脚本（例如由 script 标签加载的第一个脚本）被定义为具有特定属性，例如通常由 RequireJS 或任何兼容的加载器（诸如almond）提供的require和define属性。否则，直接加载生成的 AMD 捆绑包将导致类似define is not defined的错误。
+```javascript
+define("myDemo", [], function() {
+	return _entry_return_;
+});
+```
+以上的代码可以作为script标签引入代码的一部分被包含
+
+然后在通过以下代码调用
+``` javascript
+require(['myDemo'], function(myDemo) {
+	myDemo();
+});
+```
+
+**注意**
+
+ 如果output.library没有定义有效值，那么生成的代码将如下：
+ ``` javascript
+define([], function() {
+	return _entry_return_;
+});
+ ```
+
+
+#### umd
+> 这个选项会尝试把库暴露给前使用的模块定义系统，这使其和CommonJS、AMD兼容或者暴露为全局变量。**注意** output.library 选项在这里是必须的。
+```javascript
+(function webpackUniversalModuleDefinition(root, factory) {
+ if(typeof exports === 'object' && typeof module === 'object')
+    module.exports = factory();
+ else if(typeof define === 'function' && define.amd)
+    define([], factory);
+ else if(typeof exports === 'object')
+    exports["MyLibrary"] = factory();
+ else
+		root["MyLibrary"] = factory();
+})(typeof self !== 'undefined' ? self : this, function() {
+	return _entry_return_;
+});
+```
+**配置案例**
+```javascript
+output: {
+    library: {
+        root: "myDemo",
+        amd: "myAmdDemo",
+        commonjs: "myCjsDemo"
+    },
+    libraryTarget: "umd"
+}
+```
+
+#### jsonp
+> 这个方法会使用 jsonp 的方式把结果包裹起来。
+```javascript
+myDemo(_entry_return_);
+```

package/libs/plugins/index.js

@@ -0,0 +1,113 @@
+const webpack = require("webpack");
+const path = require("path");
+const globby = require("globby");
+const WebpackBar = require("webpackbar");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin");
+const InlineChunkHtmlPlugin = require("inline-chunk-html-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取分离css
+const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 提取分离css
+const { isEnvProduction } = require("../z-helpers/util");
+const { customConfig } = require("../z-helpers/config");
+const { rootPath, entry } = require("../z-helpers/paths");
+
+let dllJS = "";
+let dllJSON = "";
+if (customConfig.dll) {
+    const paths = globby.sync(["*.js", "*.json"], {
+        cwd: rootPath("dll")
+    });
+    paths.forEach((p) => {
+        const ext = path.extname(p);
+        if (ext === ".js") {
+            dllJS = p;
+        }
+        if (ext === ".json") {
+            dllJSON = p;
+        }
+    });
+}
+
+const getHtmlWebpack = () => {
+    const arr = [];
+    const template = rootPath("./template/index.ejs");
+
+    if (customConfig.mpa) {
+        entry.pages.forEach((pageName) => {
+            const filename = `${pageName}.html`;
+            const obj = {
+                template,
+                filename,
+                inject: "body",
+                inlineSource: "wp-runtime-",
+                chunksSortMode: "manual",
+                chunks: [pageName]
+                // favicon: rootPath('./src/assets/img/favicon.ico')
+            };
+            if (isEnvProduction) {
+                obj.output = rootPath("./dist");
+                obj.minify = {
+                    minimize: true,
+                    removeConments: true,
+                    collapseWhitespace: true,
+                    minifyCSS: true,
+                    minifyJS: true
+                };
+            }
+            arr.push(new HtmlWebpackPlugin(obj));
+        });
+    } else {
+        const filename = `index.html`;
+        const obj = {
+            template,
+            filename,
+            inlineSource: "wp-runtime-",
+            inject: "body"
+        };
+        if (isEnvProduction) {
+            obj.output = rootPath("./dist");
+            obj.minify = {
+                minimize: true,
+                removeConments: true,
+                collapseWhitespace: true,
+                minifyCSS: true,
+                minifyJS: true
+            };
+        }
+        arr.push(new HtmlWebpackPlugin(obj));
+    }
+    return arr;
+};
+
+module.exports = () => {
+    const plugins = [
+        new WebpackBar({
+            profile: true
+        }),
+
+        isEnvProduction &&
+            new MiniCssExtractPlugin({
+                // filename: 'css/[name].css',
+                filename: "[id].[chunkhash:5].css"
+            }),
+
+        ...getHtmlWebpack(),
+
+        // 内联runtime
+        customConfig.micro !== "child" && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/wp-runtime-.*\.js/]),
+
+        new CleanWebpackPlugin(),
+
+        // 告诉webpack哪些库不参与打包，同时使用时的名称也得变
+        customConfig.dll &&
+            new webpack.DllReferencePlugin({
+                manifest: rootPath(`dll/${dllJSON}`)
+            }),
+        // 将某个文件打包输出到build目录下，并在html中自动引入该资源
+        customConfig.dll &&
+            new AddAssetHtmlWebpackPlugin({
+                filepath: rootPath(`dll/${dllJS}`)
+            })
+    ].filter(Boolean);
+    return plugins;
+};

package/libs/resolve/index.js

@@ -0,0 +1,44 @@
+const { rootPath } = require('../z-helpers/paths');
+
+const getResolve = () => {
+    return {
+        /**
+            Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，
+            在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。
+            但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个 node_modules，
+            且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；
+        */
+        modules: [
+            rootPath('./src'),
+            rootPath('./node_modules')
+        ],
+
+        // 配置后缀名，方便代码书写时引用不写后缀
+        extensions: ['.ts', '.tsx', '.json', '.js', '.jsx'],
+
+        // 定义别名，在代码里可直接写 
+        // import xx from '@/'; 缓存src目录为@ 符号，避免重复寻址
+        alias: {
+            "@": rootPath("./src")
+        },
+
+        // fallback：是模块在root及默认路径下都未找到时的最终查找路径
+        // 设为false就是放弃备选的引用，假如第三方里用到了node内置包，此设置可忽略
+        fallback: {
+            'crypto': false, // crypto-browserify
+            'stream': false, // stream-browserify
+            'buffer': false  // buffer
+        }
+    }
+}
+
+
+const getResolveLoader = () => {
+    // 先从 node_modules 里找，找不到再从自定的 loaders 文件夹下找
+    modules: ['node_modules', rootPath('./deploy/z-custom-loaders')]
+}
+
+module.exports = {
+    getResolveLoader,
+    getResolve
+};

package/libs/source-map/index.js

@@ -0,0 +1,13 @@
+const { isEnvDevelopment, shouldUseSourceMap } = require('../z-helpers/util');
+
+// source-map 源码映射，单独生成map文件，标示了行和列，文件大而全
+// eval-source-map 不会生成单独map文件，集成在打包后文件，可以显示行和列
+// cheap-module-source-map 生成单独map文件，不会显示列只显示行
+// cheap-module-eval-source-map 不会生成单独map文件，集成在打包后文件，不会显示列
+
+const getSourceMap = () => {
+    return isEnvDevelopment ? "cheap-module-source-map" : shouldUseSourceMap ? 'source-map' : false
+}
+
+
+module.exports = getSourceMap;

package/libs/webpack.config.js

@@ -0,0 +1,95 @@
+const { merge } = require("webpack-merge");
+const { Production, Development } = require("./z-helpers/const");
+const { isEnvDevelopment } = require("./z-helpers/util");
+const { customConfig, buildConfig } = require("./z-helpers/config");
+const getEntries = require("./entries");
+const getDevTool = require("./source-map");
+const getOutput = require("./output");
+const { getMPAOptimization, getSPAOptimization } = require("./optimization");
+const getModule = require("./module");
+const { getResolve, getResolveLoader } = require("./resolve");
+const getPlugins = require("./plugins");
+const getExternals = require("./externals");
+const getDevServer = require("./dev");
+
+/**
+ * 事前工作
+ */
+function prepare(runtimeOpts) {}
+
+/**
+ * 
+ * @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) => {
+    prepare();
+    // 打包环境
+    const mode = isEnvDevelopment ? Development : Production;
+
+    // 配置缓存chunk
+    /**
+     * 'filesystem', // filesystem(prod默认) | memory(dev默认)
+     */
+    const cache = {
+        type: isEnvDevelopment ? "memory" : "filesystem",
+    };
+
+    // 配置source-map
+    const devtool = getDevTool();
+
+    // 配置入口 entry
+    const entry = getEntries();
+
+    // 配置输出bundle output
+    const output = getOutput();
+
+    // 配置resolveLoader
+    const resolveLoader = getResolveLoader();
+
+    // 配置optimization
+    const optimization = customConfig.mpa
+        ? getMPAOptimization()
+        : getSPAOptimization();
+
+    // 配置loaders
+    const module = getModule();
+
+    // 配置resolve
+    const resolve = getResolve();
+
+    // 配置plugins
+    const plugins = getPlugins();
+
+    // 配置devServer
+    const devServer = getDevServer();
+
+    // 配置externals
+    const externals = getExternals();
+
+    const config = Object.assign(
+        {
+            mode,
+            cache,
+            devtool,
+            entry,
+            output,
+            resolveLoader,
+            optimization,
+            module,
+            resolve,
+            plugins,
+            externals,
+        },
+        isEnvDevelopment ? { devServer } : {}
+    );
+    return merge(config, buildConfig);
+};
+
+module.exports = getWebpackConfig;

package/libs/webpack.dll.js

@@ -0,0 +1,25 @@
+const { rootPath } = require("./z-helpers/paths");
+const webpack = require("webpack");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+    entry: {
+        dll: ["react", "react-dom", "react-router-dom", "react-redux", "redux", "redux-thunk", "hoist-non-react-statics", "axios"]
+        //other:['a','b','c']
+    },
+    mode: "production",
+    output: {
+        // 输出出口指定
+        filename: "[name]_[fullhash].js", // name就是jquery
+        path: rootPath("dll"), // 打包到dll目录下
+        library: "[name]_[fullhash]" // 打包的库里面向外暴露出去的内容叫什么名字
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        // 打包生成一个manifest.json --> 提供jquery的映射关系（告诉webpack：jquery之后不需要再打包和暴露内容的名称）
+        new webpack.DllPlugin({
+            name: "[name]_[fullhash]", // 映射库的暴露的内容名称
+            path: rootPath("dll/manifest_[name]_[fullhash].json") // 输出文件路径
+        })
+    ]
+};

package/libs/z-helpers/config.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+const { rootPath } = require("./paths");
+const isABC = fs.existsSync(rootPath("abc.js"));
+const isBuild = fs.existsSync(rootPath("build.js"));
+let customConfig = {}; // 简单配置
+let buildConfig = {}; // 复杂完全合并配置
+if (isABC) {
+    customConfig = require(rootPath("abc.js"));
+} else {
+    throw new Error("not found abc.js");
+}
+if (isBuild) {
+    buildConfig = require(rootPath("build.js"));
+}
+
+module.exports = {
+    customConfig,
+    buildConfig
+};

package/libs/z-helpers/const.js

@@ -0,0 +1,8 @@
+const Production = 'production';
+const Development = 'development';
+
+
+module.exports = {
+    Production,
+    Development
+}

package/libs/z-helpers/paths.js

@@ -0,0 +1,28 @@
+const { resolve } = require('path');
+const fs = require('fs');
+const cwd = process.cwd();
+
+const rootPath = (pathname) => {
+    return resolve(cwd, pathname)
+}
+
+const resolvePath = resolve;
+
+const getEntries = () => {
+    const dirPath = rootPath('./src/pages')
+    const pages = fs.readdirSync(dirPath)
+    const pagesObj = {}
+    pages.forEach((pageName) => {
+        pagesObj[pageName] = rootPath(`./src/pages/${pageName}/main.tsx`);
+    });
+    return {
+        pagesObj,
+        pages
+    }
+}
+
+module.exports = {
+    rootPath,
+    resolvePath,
+    entry: getEntries()
+}

package/libs/z-helpers/util.js

@@ -0,0 +1,14 @@
+const os = require('os');
+const { Production, Development } = require('./const');
+
+const isEnvProduction = process.env.NODE_ENV === Production;
+const isEnvDevelopment = process.env.NODE_ENV === Development;
+const workers = os.cpus().length - 1;
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP === 'true';
+
+module.exports = {
+    isEnvProduction,
+    isEnvDevelopment,
+    shouldUseSourceMap,
+    workers
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@ecoding/base.build",
+    "version": "0.0.1",
+    "description": "tpl building",
+    "author": "cxc",
+    "license": "MIT",
+    "files": [
+        "libs"
+    ],
+    "dependencies": {
+        "@babel/core": "7.18.5",
+        "@babel/plugin-proposal-class-properties": "7.17.12",
+        "@babel/plugin-proposal-decorators": "7.18.2",
+        "@babel/plugin-proposal-private-methods": "7.17.12",
+        "@babel/plugin-proposal-private-property-in-object": "7.17.12",
+        "@babel/plugin-transform-runtime": "7.18.5",
+        "@babel/preset-env": "7.18.2",
+        "@babel/preset-react": "7.17.12",
+        "@babel/preset-typescript": "7.17.12",
+        "@ecoding/mock": "0.0.10",
+        "@svgr/webpack": "6.2.1",
+        "@typescript-eslint/eslint-plugin": "5.28.0",
+        "@typescript-eslint/parser": "5.28.0",
+        "add-asset-html-webpack-plugin": "5.0.2",
+        "autoprefixer": "10.4.7",
+        "babel-eslint": "10.1.0",
+        "babel-loader": "8.2.5",
+        "clean-webpack-plugin": "^4.0.0",
+        "concurrently": "^7.3.0",
+        "core-js": "3.23.1",
+        "cross-env": "7.0.3",
+        "css-loader": "6.7.1",
+        "css-minimizer-webpack-plugin": "4.0.0",
+        "eslint": "8.18.0",
+        "globby": "^11.0.2",
+        "html-webpack-plugin": "5.5.0",
+        "inline-chunk-html-plugin": "1.1.1",
+        "less": "4.1.3",
+        "less-loader": "11.0.0",
+        "mini-css-extract-plugin": "2.6.1",
+        "postcss-loader": "7.0.0",
+        "style-loader": "3.3.1",
+        "terser-webpack-plugin": "5.3.3",
+        "typescript": "4.7.4",
+        "webpack": "5.73.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.9.2",
+        "webpack-merge": "5.8.0",
+        "webpackbar": "5.0.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "c1b38f181a2441de24a46e530fa1a4d36ad43222"
+}